如何使一些列左对齐和一些列对齐中心在反应表-反应

Question

你好，堆栈溢出成员

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

如果你能帮助我，请提供一个关于CodeSandbox的演示

这是我的标题数据

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

向列中添加HeaderStyle：{text Alignes：'right'}将完成此操作，而不需要为标题单元格自定义渲染器。有点清洁工

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

这是v6中的一个选项，但它似乎没有进入v7。

Answer 2

有几个选择。一个是列配置采用样式属性，您可以使用该属性传入自定义CSS，包括文本对齐（有关列属性的文档，请参见此处）。将所需的textAlign样式值传递到每一列。

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

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

（谷歌浏览文档和示例用法）

Answer 3

方法1：

像这样的东西应该可以完成任务

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

如果你能帮助我，请提供一个关于CodeSandbox的演示

在这里玩

OP评论后更新

但是对于中心对齐的列，它们的子单元格数据也将中心对齐

像这样操纵单元格样式

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

在这里播放

方法2：

使用可以使用HeaderClassName并指定一个类名，在该类中您可以指定规则文本对齐： center

所以代码看起来像

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

方法3：

如果有很多标题，那么在所有标题中添加headerClassName是一件痛苦的事情。在这种情况下，您可以在ReactTableDefaults

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

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

在反应表中，像这样使用

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

注意：如果您使用的是引导，则可以将内置类文本中心分配给headerClassName