如何右对齐 react-table 列中的数据？

Question

我在一些节点代码中定义了这些列，以在反应中创建列 table:

const columns = [{
    Header: 'Regiom',
    accessor: 'region' // String-based value accessors!
  }, {
    Header: 'Division',
    accessor: 'division'
  }, {
    Header: 'File Client Id',
    accessor: 'facilityid'
  }, {
    Header: 'Meter #',
    accessor: 'meternumber'
  }, {
    Header: 'Service Address',
    accessor: 'serviceaddress'
  }, {
    Header: 'Service City',
    accessor: 'servicecity'
  }, {
    Header: 'Service Zip',
    accessor: 'servicezip'
  }, {
    Header: 'Account Number',
    accessor: 'accountnumber'
  }, {
    Header: 'Utility Provider',
    accessor: 'utilityprovider'
  }, {
    Header: 'Interval Start',
    accessor: 'intervalstart'
  }, {
    Header: 'Interval End',
    accessor: 'intervalend'
  }, {
    Header: 'kWh Usage',
    accessor: 'kwh_usage'
  }, {
    Header: 'kW Demand',
    accessor: 'kw_demand'
  }, {
    Header: 'Gas Unit of Measure',
    accessor: 'gas_uom'
  }, {
    Header: 'Gas Usage Amount',
    accessor: 'gas_usage_amount'
  }];

我真正想要做的就是让 headers 列居中，但右对齐数字 - 例如，kWh Usage 列。我怎么做？有没有办法将样式应用于其中的列？我尝试了样式：{text-align: right} 并且代码抛出语法错误...

Answer 1

这里的解决方案：https://www.npmjs.com/package/react-table#example

{
    Header: 'Age',
    accessor: 'age',
    Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
  },

这篇link可能对你有帮助：https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822

Answer 2

您可以通过在 Header 或 Cell 中添加自定义组件来实现。

const columns = [
  {
    Header: () => <div style={{ textAlign: "right" }}>Regiom</div>,
    accessor: "region",
    Cell: row => <div style={{ textAlign: "right" }}>{row.value}</div>
  },
  ...
  ...

这是为您准备的示例代码。
https://codesandbox.io/s/react-table-simple-table-eep26

希望这对你有用！

如何右对齐 react-table 列中的数据？

How do I right justify data in react-table columns?

reactjs

react-table