将反应表最后一列向右对齐

Question

我正在使用 react-table 并且我想将表中的最后一列向右对齐。 我的策略是将自定义 class 的text-right应用于列。 为此，我尝试在我的列中覆盖getHeaderProps但没有运气：

const columns = React.useMemo(
  () => [
    {
      Header: 'Name',
      accessor: 'name',
    },
    {
      Header: 'Age',
      accessor: 'age',
      getHeaderProps: () => { className: 'text-right' },
    }
  ]
)

知道我该怎么做吗？

Answer 1

在寻找同样问题的答案时。 我想我可以做到这一点。

const columns = React.useMemo(
  () => [
    {
      Header: 'Name',
      accessor: 'name',
    },
    {
      Header: 'Age',
      accessor: 'age',
      Cell: (cellProps) => <AgeDisplay {...cellProps} />,
    }
  ]
)

const AgeDisplay = (cellProps) => <div className="text-right">{cellProps.cell.value}</div>;