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

时间:2018-12-04 03:38:21

标签: javascript html css reactjs react-table

Hello Stack溢出成员

这是列标题的数组。我希望第1列到第5列左对齐(第1列到第5列的所有标题,子标题和表数据单元格都左对齐),而我希望第6列到第8列的居中对齐(所有标题,子标题并将第1列到第5列的表格数据单元居中对齐)。请帮助我解决此问题,因为我只能使所有列居中或使所有列保持对齐。

我想在第6至8列标题中实现此特定样式,如下图所示。 Image

如果可以帮助我,请在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'
      }
     ]
      },
      ];

4 个答案:

答案 0 :(得分:3)

方法1:

类似的事情应该可以完成

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

如果可以帮助我,请在CodeSandbox上提供演示

播放here

enter image description here

OP评论后更新

  

但对于将居中对齐的列,其子像元数据   也将居中对齐

像这样操纵单元格样式

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

播放here

enter image description here

方法2:

使用可以使用headerClassName并指定一个类名,在该类中,您可以指定规则text-align: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中,像这样使用

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

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

答案 1 :(得分:0)

有一些选择。一种是列配置具有style属性,您可以使用该属性来传递包括textAlign的自定义CSS(有关列属性的文档,请参见here)。将所需的textAlign样式值传递到每一列。

另一种选择是将自定义Cell属性传递给列,然后将内容包装在分配了文本对齐样式的元素中。像这样:

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

(可以在Google周围查看文档和示例用法)

答案 2 :(得分:0)

在列中添加headerStyle: {textAlign: 'right'}可以解决此问题,而无需为标题单元格提供自定义渲染器。一点清洁的恕我直言

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

答案 3 :(得分:-1)

使用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
     }]