Question

我有一个页面，显示两个AG-Grid。

两个AG-Grid表都使用不同的列集，其中某些列共享相同的“ headerName”和“ fields”。

当我试图将一个行固定在一个AG-Grid表中时，尽管另一个表未设置任何变量，但被固定行的样式显示在另一个表中。

下面是我的代码：

两个列集的比较：

export const cols1= [
  {
    headerName: 'Host Name',
    field: 'assetName',
    filter: 'agTextColumnFilter',
    pinnedRowCellRenderer: 'tableTotalRowRenderer'
  },
  {...}
];

export const cols2= [
  {
    headerName: 'Host Name',
    field: 'assetName',
    filter: 'agTextColumnFilter'
  },
  {...}
];

两个AG-Grid集的比较：

<div style={{height: '100%', width: '100%'}} className='ag-theme-spectrum'>
          <AgGridReact
            columnDefs={tableCols.cols1}
            defaultColDef={this.state.defaultColDef}
            rowData={this.props.data1}
            frameworkComponents={this.state.frameworkComponents}
            gridOptions={gridOptions}
            onGridReady={this.onGridReady.bind(this)}
            gridAutoHeight={this.state.gridAutoHeight}
            pinnedBottomRowData={(this.props.data1.length !== 0) ? this.getTotalRow(this.props.data1) : []}
            showGrid={this.state.showGrid} />
          <br />
          <AgGridReact
            columnDefs={tableCols.cols2}
            defaultColDef={this.state.defaultColDef}
            rowData={this.props.data2}
            gridOptions={gridOptions}
            onGridReady={this.onGridReady.bind(this)}
            gridAutoHeight={this.state.gridAutoHeight}
            showGrid={this.state.showGrid} />
        </div>

在我的构造函数中：

constructor(props, context) {
    super(props, context);
    this.state = {
      clusterIndex: 0,
      activeTab: '1',
      showGrid: true,
      gridAutoHeight: true,
      defaultColDef: {
        filter: true,
        resizable: true,
        sortable: true
      },
      frameworkComponents: {
        tableTotalRowRenderer: TableTotalRowRenderer
      }
    };

最后是我的tableTotalRowRenderer：

export default class TableTotalRowRenderer extends React.Component {
  render() {
    return (
      <span className='highlight'>{this.props.value}</span>
    );
  }
};

由于这两个表位于同一页面上，因此我尝试将它们分开以查看分离的结果，并且它确实有效。它不会自动将固定的行应用于两个表的底部。

我完全不知道如何在没有我明确设置的情况下将AG-Grid自动应用这样的样式。这是否意味着每个页面只能有一个表？

谢谢。

独立设计一个AG-Grid表格

0 个答案: