DevExpress React Grid Table 固定 Header 及 Columns 示例代码

devExpress demo

import React, { useState } from 'react';
import Paper from '@material-ui/core/Paper';
import {
  SortingState,
  IntegratedSorting,
} from '@devexpress/dx-react-grid';
import {
  Grid,
  VirtualTable,
  TableHeaderRow,
  TableFixedColumns,
} from '@devexpress/dx-react-grid-material-ui';

export default () => {
  const [columns] = useState([
    { name: 'region', title: 'Region' },
    { name: 'sector', title: 'Sector' },
    { name: 'channel', title: 'Channel' },
    { name: 'customer', title: 'Customer' },
    { name: 'product', title: 'Product' },
    { name: 'saleDate', title: 'Sale date' },
    { name: 'amount', title: 'Sale Amount' },
  ]);
  const rows = [
    { region: "Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "2Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "3Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "4Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "5Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "Demale", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "Wemale", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
    { region: "Female", sector: "Sandra", channel: "Las Vegas", customer: "Audi A4", product: "Ujsds", saleDate: "20192", amount: "2334" },
  ];
  const [tableColumnExtensions] = useState([
    { columnName: 'region', width: 120 },
    { columnName: 'sector', width: 100 },
    { columnName: 'channel', width: 100 },
    { columnName: 'customer', width: 100 },
    { columnName: 'product', width: 100 },
    { columnName: 'saleDate', width: 80 },
    { columnName: 'amount', align: 'right', width: 100 },
  ]);
  const [leftColumns] = useState(['region']);

  return (
    <Paper elevation={0} square={true}>
      <Grid
        rows={rows}
        columns={columns}
      >
        <SortingState
          defaultSorting={[{ columnName: 'region', direction: 'asc' }]}
        />
        <IntegratedSorting />
        <VirtualTable
          columnExtensions={tableColumnExtensions}
        />
        <TableHeaderRow showSortingControls />
        <TableFixedColumns
          leftColumns={leftColumns}
        />
      </Grid>
    </Paper>
  );
};

示例版本：

MUI - v3.9.3
DevExpress - v1.11.1