如何使 React Table 中的某些列左对齐和某些列居中对齐 - React

Posted 2023-02-19

【中文标题】如何使 React Table 中的某些列左对齐和某些列居中对齐 - React

【英文标题】：How to make some columns align left and some column align center in React Table - React

【发布时间】：2019-05-05 10:20:52

【问题描述】：

Hello Stack 溢出成员

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

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

如果你能帮到我，请在 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'
      
     ]
      ,
      ];

【参考方案1】：

在列中添加headerStyle: textAlign: 'right' 即可解决问题，而无需为标题单元格添加自定义渲染器。有点清洁恕我直言

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

更新：

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

【讨论】：

抱歉耽搁了@Nick。这是 v6 github.com/tannerlinsley/react-table/tree/v6#columns 中的一个功能，但我不认为它保留在 v7 中。

【参考方案2】：

方法一：

这样的事情应该做的工作

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

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

播放here

OP 评论后更新

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

像这样操作单元格样式

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

播放它here

方法二：

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

所以代码看起来像

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

......

]

方法三：

如果您有很多标题，则在所有标题中添加 headerClassName 会很痛苦。在这种情况下，您可以在ReactTableDefaults中设置类名

import ReactTable, ReactTableDefaults from 'react-table';

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

在 ReactTable 中，像这样使用

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

注意：如果您使用引导程序，则可以将内置类 text-center 分配给 headerClassName

【讨论】：

您好，谢谢，但是对于将居中对齐的列，它们的子单元格数据也将居中对齐

您能否在这方面帮助我，稍微修改您的答案，使子单元格也遵循标题模式，中心对齐的标题将具有中心对齐的数据，而左对齐的标题将具有左对齐的数据

【参考方案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
     ]

【参考方案4】：

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

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

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

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

【讨论】：

Kiranvj 几乎解决了我的问题是对于将居中对齐的列，它们的子单元格数据也将居中对齐。在这方面，您能否通过稍微修改 kiranvj 的答案来帮助我，使子单元格也遵循标题模式，中心对齐的标题将具有中心对齐的数据，而左对齐的标题将具有左对齐的数据。