如何在React表格中使某些列左对齐，某些列居中？- React

Question

如何在React表格中使某些列左对齐，某些列居中？- React

24

大家好，Stack Overflow会员们

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

我想要在第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'
      }
     ]
      },
      ];

- user10374052

5个回答

1

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

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

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

（在谷歌上搜索文档和示例用法）

- Jayce444

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

1

将 headerStyle: {textAlign: 'right'} 添加到列中，即可完成操作，无需自定义标题单元格的渲染器。这样会更简洁一些。

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

更新：

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

- pigeontoe

抱歉 @Nick，回复晚了。这是 v6 版本的一个功能 https://github.com/tannerlinsley/react-table/tree/v6#columns，但我认为在 v7 中已经被删除了。 - pigeontoe

0

在我的项目中，我已经以这种方式实现了它。根据您的代码，您可以按照以下方式实现它：

columns: [
           {             
              accessor: "firstName",
              Header: "S Column 1",
              style: {
                textAlign: 'right'
              }
           }
]

你可以根据其他列进行调整。希望能帮到你。

- Aamir

这似乎没有影响到任何东西？ - ii iml0sto1

-2

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

- Derek Adair

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kiranvj · Accepted Answer

方法1：

这样做应该能够完成任务。

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

如果您能帮忙，可以在 CodeSandbox 上提供演示。

在此处播放demo

在原贴评论后更新

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

像这样操作单元格样式

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

在这里玩。

方法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
 ...
 ...
 column = { columnDefaults }
 />

注意：如果您正在使用Bootstrap，您可以将内置类text-center分配给headerClassName。