更改React-Table的默认样式

时间:2018-10-01 21:30:46

标签: javascript css reactjs styling react-table

我有一个反应表,每行都有一个箭头,单击该箭头会展开为另一个反应表的子组件。

我想更改该箭头的颜色,并尽可能将其移动到列的右侧。有谁知道这是否可行,以及如何做到这一点。我已经附上了一张表格代码的图片,以及它当前呈现的样子。感谢您的帮助!

Code example

Current style

1 个答案:

答案 0 :(得分:1)

可以使用Custom Expander。您可以像这样定义您的列:

columns: [
  // other columns...,
  {
    expander: true,
    Header: () => <strong>More</strong>,
    width: 65,
    Expander: ({ isExpanded, ...rest }) =>
      <div>
        {isExpanded
          ? <span>&#x2299;</span>
          : <span>&#x2295;</span>}
      </div>,
    style: {
      cursor: "pointer",
      fontSize: 25,
      padding: "0",
      textAlign: "center",
      userSelect: "none",
      color: "green"
    },
    Footer: () => <span>&hearts;</span>
  }
]

Edit React-Table - Custom Expander Position