import React from 'react';
class MultiLineHeader extends React.Component {
render() {
const { styles, header } = this.props;
return (
{header[0]}
{header[1]}
);
}
}
const columnDefs = [
{
headerName: 'Header 1',
headerGroupComponentFramework: MultiLineHeader,
headerGroupComponentParams: { styles: { headerStyle: { fontWeight: 'bold' }, subHeaderStyle: { fontStyle: 'italic' } }, header: ['First Line', 'Second Line']}
},
{
headerName: 'Header 3',
}
];
在headerGroupComponent中,我们可以设置headerGroupComponentParams属性来传递自定义组件的属性(props)。通过传递styles和header,我们可以在自定义组件中设置不同的样式和文字内容。 在上述示例中,我们设置了header为包含两个字符串值的数组,表示第一个和第二个表头行的文本。
需要注意的是,自定义组件的样式需要在外部列定义中设置。在上述示例中,我们设置了fontWeight和fontStyle属性来定义表头的粗细和斜体。
通过这种方法,我们可以在AgGrid中轻松实现多行表头,并为每行设置不同的样式。