Hello Stack溢出成员
这是列标题的数组。我希望第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'
}
]
},
];
答案 0 :(得分:3)
方法1:
类似的事情应该可以完成
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
方法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
.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
}]