javascript 如何在 React Table 中使某些列左对齐，某些列居中对齐 - React
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53605342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make some columns align left and some column align center in React Table - React
提问by kiranvj
Hello Stack overflow members
你好堆栈溢出成员
This is array for the column headers. I want column 1 to column 5 left align (all the header, sub header and table data cells of column 1 to column 5 to be left aligned) while I I want column 6 to column 8 to be centre aligned (all the header, sub header and table data cells of column 1 to column 5 to be centre aligned). Please help me to solve this as I can only make either all columns center or all columns left aligned.
这是列标题的数组。我希望第 1 列到第 5 列左对齐（第 1 列到第 5 列的所有标题、子标题和表格数据单元格左对齐），而我希望第 6 列到第 8 列居中对齐（所有标题、子标题）和第 1 列到第 5 列的表格数据单元格居中对齐）。请帮我解决这个问题，因为我只能使所有列居中或所有列左对齐。
I want to implement this particular style on column 6 to 8 header as shown in this image.
.
我想在第 6 到 8 列标题上实现这种特殊样式，如图所示。.
If you can help me, please provide a demo on CodeSandbox
如果你能帮助我，请提供 CodeSandbox 上的演示
This is my Header Data
这是我的标题数据
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'
}
]
},
];
回答by kiranvj
Method 1:
方法一：
Something like this should do the job
像这样的事情应该可以完成这项工作
columns: [
{
accessor: "firstName",
Header: () => (
<div
style={{
textAlign:"right"
}}
>S Column 1</div>)
},
If you can help me, please provide a demo on CodeSandbox
如果你能帮助我，请提供 CodeSandbox 上的演示
Play here
在这里玩
Update after OP comment
OP评论后更新
but for columns which will be centre aligned , their sub cell data will also be centre aligned
但是对于将居中对齐的列，它们的子单元格数据也将居中对齐
Manipulate cell styles like this
像这样操作单元格样式
Cell: row => <div style={{ textAlign: "center" }}>{row.value}</div>
Play it here
在这里播放
Method 2:
方法二：
Use can use the headerClassNameand specify a class name, in that class you can specify the rule text-align:center
使用可以使用headerClassName并指定一个类名，在那个类中可以指定规则text-align:center
So the code will look like
所以代码看起来像
const columns = [{
Header: 'Column 5',
accessor: 'name',
headerClassName: 'your-class-name'
},
{
......
}
]
Method 3:
方法三：
If you have lot of headers, adding headerClassName in all headers is a pain. In that case you can set the class name in ReactTableDefaults
如果您有很多标头，在所有标头中添加 headerClassName 会很痛苦。在这种情况下，您可以在ReactTableDefaults
import ReactTable, {ReactTableDefaults} from 'react-table';
const columnDefaults = {...ReactTableDefaults.column, headerClassName: 'text-left-classname'}
and in the ReactTable, use like this
在 ReactTable 中，像这样使用
<ReactTable
...
...
columns = { columnDefaults }
/>
Note: if you are using bootstrap you can assign the inbuilt class
text-centertoheaderClassName
注意：如果您使用引导程序，您可以将内置类分配
text-center给headerClassName
回答by pigeontoe
Adding headerStyle: {textAlign: 'right'}to the column will do the trick without the need for a custom renderer for the header cell. A little cleaner imho
添加headerStyle: {textAlign: 'right'}到列中就可以做到这一点，而无需为标题单元格定制渲染器。稍微清洁一点恕我直言
{
Header: "Name",
accessor: "name",
headerStyle: {textAlign: 'right'}
},
回答by Jayce444
There's a few options. One is that the column configuration takes a styleproperty, which you can use to pass in custom CSS including textAlign(see herefor docs on column properties). Into each column pass the desired textAlignstyle value.
有几个选项。一个是列配置采用一个style属性，您可以使用该属性传递自定义 CSS，包括textAlign（有关列属性的文档，请参见此处）。向每一列传递所需的textAlign样式值。
Another option would be to pass a custom Cellproperty to the columns, and wrap your content in an element to which you've assigned the text alignment styling. Something like:
另一种选择是将自定义Cell属性传递给列，并将您的内容包装在您已为其分配文本对齐样式的元素中。就像是：
{
Header: "Name",
accessor: "name",
Cell: cellContent => <RightAlign>{cellContent}</RightAlign>
},
(Google around to see the docs and example usages)
（谷歌查看文档和示例用法）
回答by Derek Adair
Using CSS + headerClassName
使用 CSS + headerClassName
CSS
CSS
.ReactTable .rt-thead .rt-tr-align-left {
text-align: left;
}
.ReactTable .rt-thead .rt-tr-align-right{
text-align: right;
}
Column Config
列配置
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
}]
