material-ui - 定位网格工具箱材质ui DataGrid（从左上角默认位置重置）

Question

我GridToolBox使用DataGrid. 我有兴趣知道是否可以定位GridToolBox在底部而不是左上角？

import * as React from 'react';
import {
  DataGrid,
  GridToolbarContainer,
  GridToolbarExport,
} from '@material-ui/data-grid';

function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <GridToolbarExport />
    </GridToolbarContainer>
  );
}

const columns = [
  { field: 'id', headerName: 'ID' },
  {
    field: 'firstName',
    headerName: 'First name',
    editable: true,
  },
  {
    field: 'lastName',
    headerName: 'Last name',
    editable: true,
  },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    editable: true,
  },
  {
    field: 'fullName',
    headerName: 'Full name',
    description: 'This column has a value getter and is not sortable.',
    sortable: false,
    valueGetter: (params) =>
      `${params.getValue(params.id, 'firstName') || ''} ${
        params.getValue(params.id, 'lastName') || ''
      }`,
  },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];

export default function DataTable({ tableSchema, rowsData }) {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <div style={{ flexGrow: 1, height: '100%', width: '100%' }}>
        <DataGrid
          rows={rowsData || rows}
          rowHeight={50}
          columns={tableSchema || columns}
          pageSize={10}
          // checkboxSelection
          disableSelectionOnClick
          rowsPerPageOptions={[10]}
          components={{
            Toolbar: CustomToolbar,
          }}
        />
      </div>
    </div>
  );
}

以上是我的代码的工作方式。

标签： material-ui