AfGrid

AfGrid wraps the MUI DataGridPro to bind it to an Appframe data object.

The following binding is done:

• Bind the currently loaded data in the rowsproperty

• Persist user changes to the layout in Indexed DB. Like the DevEx XtraGrid grid, the layout can be reset by changing the layoutVersion prop

• Enables editing rows if the data object is editable

• Adds an Add button to the toolbar if inserting new rows is allowed

• Binds filtering and sorting to the data object. Sort binding can be disabled with the disableServerSorting property, since some functionality in the MUI grid does not work with server side sorting (e.g. grouping)

• Enables paging on the grid if the data object is dynamic loading, and binds the page size to the maxRecords parameter

• Can optionally bind the current index of the data object to the grid selection by setting the bindIndex property to true

Three properties must always be set on the grid:

• id - A name of the grid used to persist the grid layout in Indexed DB

• dataObject - The data object to bind the grid to

• columns - Column definitions for the grid

Notes on keyboard navigation

The grid should only be a single tab stop on the page. If you use custom cell rendering to render a component that is focusable, it is important to use the tabIndex value of the GridCellParams to make sure the component is only focusable when the cell is focused.

let columns: AfGridColumn[] = [
  {
    field: "ProjectID",
    editable: false,
    headerName: "ID",
    renderCell: (params: GridCellParams<any, any, any>) => (
      <Link to={`/${params.row.ProjectID}/`} tabIndex={params.tabIndex}>
        {params.value}
      </Link>
    ),
  },
];

Usage

import { AfGrid, AfGridColumn, GridCellParams } from "@olenbetong/appframe-mui";
import { ProjectsRecord } from "~/dataObjects";
import { Link } from "react-router-dom";

import { getLocalizedString } from "@olenbetong/appframe-core";
import { DataObject } from "@olenbetong/appframe-data";

function RenderLinkCell(params: GridCellParams<any, any, any>) {
  return (
    <Link to={`/${params.row.ProjectID}/`} tabIndex={params.tabIndex}>
      {params.value}
    </Link>
  );
}

const columns: AfGridColumn[] = [
  {
    field: "ProjectID",
    editable: false,
    headerName: "ID",
    renderCell: RenderLinkCell,
  },
  {
    field: "ProjectName",
    headerName: getLocalizedString("Name"),
    width: 350,
    renderCell: RenderLinkCell,
  },
  {
    field: "LastCastingDate",
    editable: false,
    type: "date",
  },
  {
    field: "LastTransportDate",
    editable: false,
    type: "date",
  },
  {
    field: "LastAcceptanceDate",
    editable: false,
    type: "date",
  },
];

export function ProjectTable() {
  return (
    <AfGrid
      id="ProjectsPageTableGrid"
      columns={columns}
      dataObject={dsProjects}
    />
  );
}

For more information on how to use the grid, see the MUI documentation.