Самостоятельная укладка одного стола AG-Grid - PullRequest
Новая
       29

Самостоятельная укладка одного стола AG-Grid

0 голосов
/ 12 апреля 2019

У меня есть страница, которая отображает две 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
      }
    };

И, наконец, мой столTotalRowRenderer: 

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

Поскольку эти две таблицы находятся на одной странице, я попытался разделить их, чтобы увидеть результаты разделения, и это действительно сработало. Он не применял автоматически прикрепленный ряд к нижней части обеих таблиц.

Мой разум совершенно сбит с толку, почему AG-Grid автоматически применяет такой стиль, а я его явно не настраиваю. Означает ли это, что на каждой странице должна быть только одна таблица?

Спасибо.

...