如何在 React Table 中使一些列左对齐而一些列居中对齐 - React

Question

Hello Stack 溢出成员

这是第 header 列的数组。我希望第 1 列到第 5 列左对齐（第 1 列到第 5 列的所有 header、sub header 和 table 数据单元格左对齐）而我想要第 6 列到第8 居中对齐（第 1 列至第 5 列的所有 header、sub header 和 table 数据单元格居中对齐）。请帮助我解决这个问题，因为我只能使所有列居中或所有列左对齐。

我想在第 6 至 8 列 header 上实现这种特殊样式，如图所示。 。

如果你能帮到我，请在CodeSandbox上提供一个演示

这是我的Header数据

const columns = [
 {
    Header: 'Column 1',
        columns: [
           {
               Header: 'S Column 1',
               accessor: 'firstName'
           }
      ]
  },
  {
      Header: 'Column 2',
       columns: [
         {
            Header: 'S Column 2',
            accessor: 'firstName'
          }
       ]
     },
    {
            Header: 'Column 3',
            columns: [
    {
            Header: 'S Column 3',
            accessor: 'firstName'
          }
         ]
   },
    {
          Header: 'Column 4',
          columns: [
    {
            Header: 'S column 4',
            accessor: 'firstName'
     }
    ]
      },
     {
     Header: 'Column 5',
    columns: [
    {
    Header: 'S column 5',
     accessor: 'firstName'
    }
   ]
   },
  {
     Header: 'Column 6',
     columns: [
  {
        Header: 'S column 6a',
        accessor: 'firstName'
  },
   {
        Header: 'S column 6b',
        accessor: 'firstName'
    },
    {
        Header: 'S column 6c',
        accessor: 'firstName'
     },
    {
         Header: 'S column 6d',
         accessor: 'firstName'
    }
  ]
     },
      {
     Header: 'Column 7',
     columns: [
     {
      Header: 'S column 7',
         accessor: 'firstName'
   }
    ]
     },
      {
        Header: 'Column 8',
        columns: [
      {
       Header: 'S Column 8a',
       accessor: 'firstName'
      },
     {
       Header: 'S Column 8b',
       accessor: 'firstName'
     },
    {
    Header: 'S Column 8c',
    accessor: 'firstName'
    },
    {
      Header: 'S Column 8d',
      accessor: 'firstName'
      }
     ]
      },
      ];

Answer 1

有几个选项。一个是列配置采用 style 属性，您可以使用它来传递自定义 CSS，包括 textAlign（有关列属性的文档，请参阅 here ).在每一列中传递所需的 textAlign 样式值。

另一种选择是将自定义 Cell 属性传递给列，并将您的内容包装在您为其分配了文本对齐样式的元素中。类似于：

{
    Header: "Name",
    accessor: "name",
    Cell: cellContent => <RightAlign>{cellContent}</RightAlign>
},

（Google 查看文档和示例用法）

Answer 2

方法一：

像这样应该可以完成工作

columns: [
           {                 
              accessor: "firstName",
              Header: () => (
                    <div
                      style={{
                        textAlign:"right"
                      }}
                    >S Column 1</div>)
           },

If you can help me, please provide a demo on CodeSandbox

播放here

OP评论后更新

but for columns which will be centre aligned , their sub cell data will also be centre aligned

像这样处理单元格样式

Cell: row => <div style={{ textAlign: "center" }}>{row.value}</div>

播放 here

方法二：

Use可以使用headerClassName并指定一个class名称，在那class你可以指定规则text-align:center

所以代码看起来像

const columns = [{
  Header: 'Column 5',
  accessor: 'name',
  headerClassName: 'your-class-name'
},
{
......
}
]

方法三：

如果您有很多 headers，在所有 headers 中添加 headerClassName 会很痛苦。在这种情况下，您可以在 ReactTableDefaults

中设置 class 名称

import ReactTable, {ReactTableDefaults} from 'react-table';

const columnDefaults = {...ReactTableDefaults.column, headerClassName: 'text-left-classname'}

在 ReactTable 中，像这样使用

<ReactTable
 ...
 ...
 column = { columnDefaults }
 />

Note: if you are using bootstrap you can assign the inbuilt class text-center to headerClassName

Answer 3

使用 CSS + headerClassName

CSS

.ReactTable .rt-thead .rt-tr-align-left {
    text-align: left;
}

.ReactTable .rt-thead .rt-tr-align-right{
    text-align: right;
}

列配置

const columns = [
 {
    Header: 'Column 1',
    columns: [
           {
               Header: 'S Column 1',
               accessor: 'firstName',
               // Apply custom className to header
               headerClassName: 'rt-tr-align-left'
           }
      ]
  },
  {
     Header: 'Column 2',
     columns: [{
            Header: 'S Column 2',
            accessor: 'firstName',
            // Apply custom className to header
            headerClassName: 'rt-tr-align-right'

          }
       ]
       /// etc
     }]

Answer 4

将 headerStyle: {textAlign: 'right'} 添加到列中即可实现，无需 header 单元格的自定义渲染器。更干净一点恕我直言

{
    Header: "Name",
    accessor: "name",
    headerStyle: {textAlign: 'right'}
},

更新：

这是 v6 中的一个选项，但它似乎没有出现在 v7 中。

如何在 React Table 中使一些列左对齐而一些列居中对齐 - React

How to make some columns align left and some column align center in React Table - React

javascript

html

css

reactjs

react-table

使用 CSS + headerClassName

更新：