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

【问题标题】：Align react-table last column to the right将反应表最后一列向右对齐
【发布时间】：2020-08-02 05:30:37
【问题描述】：

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

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

知道我该怎么做吗？

【问题讨论】：

为什么不用 CSS？

标签： reactjs react-table

【解决方案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>;

【讨论】：