Material-UI Data Grid

import { 
  DataGrid, 
  useApiRef, 
  classnames 
} from "@material-ui/data-grid";

import { 
  DataGrid,
  useApiRef,
  classnames,
  type DataGridProps,
  type ColDef,
  type RowData,
  type GridApi,
  type ApiRef,
  type CellParams,
  type RowParams
} from "@material-ui/data-grid";

const { 
  DataGrid, 
  useApiRef, 
  classnames 
} = require("@material-ui/data-grid");

import React from "react";
import { DataGrid } from "@material-ui/data-grid";

const columns = [
  { field: "id", headerName: "ID", width: 90 },
  { field: "firstName", headerName: "First name", width: 150 },
  { field: "lastName", headerName: "Last name", width: 150 },
  { field: "age", headerName: "Age", type: "number", width: 110 },
];

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 },
];

function MyDataGrid() {
  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
      />
    </div>
  );
}

declare const DataGrid: React.ForwardRefExoticComponent<
  DataGridProps & React.RefAttributes<HTMLDivElement>
>;

interface DataGridProps extends DataGridOptionsProp {
  /** Array of row data objects */
  rows: RowsProp;
  /** Array of column definition objects */
  columns: Columns;
  /** Custom component overrides */
  components?: GridComponentOverridesProp;
  /** Loading state indicator */
  loading?: boolean;
  /** CSS class name */
  className?: string;
  /** Error state to display */
  error?: any;
}

type RowsProp = RowData[];
type Columns = ColDef[];

interface ColDef {
  /** Column identifier for mapping to row data */
  field: string;
  /** Display name in column header */
  headerName?: string;
  /** Column width in pixels */
  width?: number;
  /** Column data type */
  type?: ColType;
  /** Cell value alignment */
  align?: Alignment;
  /** Sort comparator function */
  sortComparator?: ComparatorFn;
  /** Custom cell renderer */
  renderCell?: (params: CellParams) => React.ReactElement;
  /** Custom header renderer */
  renderHeader?: (params: ColParams) => React.ReactElement;
  /** Value getter function */
  valueGetter?: (params: ValueGetterParams) => CellValue;
  /** Value formatter function */
  valueFormatter?: (params: ValueFormatterParams) => CellValue;
}

type ColType = "string" | "number" | "date" | "dateTime" | "boolean";
type Alignment = "left" | "right" | "center";

interface RowData extends ObjectWithId {
  id: RowId;
  [key: string]: any;
}

interface RowModel {
  id: RowId;
  data: RowData;
  selected: boolean;
}

type RowId = string | number;
type CellValue = string | number | boolean | Date | null | undefined | object;

interface ObjectWithId {
  id: RowId;
}

interface DataGridOptionsProp extends Partial<GridOptions> {
  // Community edition excludes pagination, disableMultipleColumnsSorting, disableMultipleSelection
}

interface GridOptions {
  /** Dynamic height based on content */
  autoHeight?: boolean;
  /** Row height in pixels */
  rowHeight: number;
  /** Header height in pixels */
  headerHeight: number;
  /** Scrollbar size in pixels */
  scrollbarSize: number;
  /** Number of columns rendered outside viewport */
  columnBuffer: number;
  /** Page size for pagination */
  pageSize?: number;
  /** Available page size options */
  rowsPerPageOptions?: number[];
  /** Enable checkbox selection */
  checkboxSelection?: boolean;
  /** Hide footer components */
  hideFooter?: boolean;
  hideFooterRowCount?: boolean;
  hideFooterPagination?: boolean;
}

interface GridOptions {
  /** Cell click handler */
  onCellClick?: (param: CellParams) => void;
  /** Cell hover handler */
  onCellHover?: (param: CellParams) => void;
  /** Row click handler */
  onRowClick?: (param: RowParams) => void;
  /** Row selection handler */
  onRowSelected?: (param: RowSelectedParams) => void;
  /** Selection change handler */
  onSelectionChange?: (param: SelectionChangeParams) => void;
  /** Column header click handler */
  onColumnHeaderClick?: (param: ColParams) => void;
  /** Sort model change handler */
  onSortModelChange?: (params: SortModelParams) => void;
  /** Page change handler */
  onPageChange?: (param: PageChangeParams) => void;
  /** Error handler */
  onError?: (args: any) => void;
}

/** Hook to create API reference */
function useApiRef(): ApiRef;

type ApiRef = React.MutableRefObject<GridApi>;

interface GridApi extends CoreApi, EventsApi, RowApi, ColumnApi, 
  SelectionApi, SortApi, VirtualizationApi, PaginationApi {
  // Combined API interface
}

/** Utility function for combining CSS class names */
function classnames(...args: any[]): string;

// Keyboard Utilities
/** Array of keys that enable multiple selection */
const MULTIPLE_SELECTION_KEYS: string[];
/** Check if key code enables multiple selection */
function isMultipleKey(code: string): boolean;
/** Check if key is Tab */
function isTabKey(code: string): boolean;
/** Check if key is Space */
function isSpaceKey(code: string): boolean;
/** Check if key is an arrow key */
function isArrowKeys(code: string): boolean;
/** Check if key is Home or End */
function isHomeOrEndKeys(code: string): boolean;
/** Check if key is Page Up or Page Down */
function isPageKeys(code: string): boolean;
/** Check if key is a navigation key */
function isNavigationKey(code: string): boolean;

// DOM Utilities
/** Check if element has overflow */
function isOverflown(element: Element): boolean;
/** Find parent element by class name */
function findParentElementFromClassName(elem: Element, className: string): Element | null;
/** Check if element is a grid cell */
function isCell(elem: Element | null): boolean;
/** Check if element is a header cell */
function isHeaderCell(elem: Element): boolean;
/** Get row ID from row element */
function getIdFromRowElem(rowEl: Element): string;
/** Find grid root element from current element */
function findGridRootFromCurrent(elem: Element): HTMLDivElement | null;

// Type Checking Utilities
/** Check if value is a Date */
function isDate(value: any): value is Date;
/** Check if value is an array */
function isArray(value: any): value is Array<any>;
/** Check if value is a string */
function isString(value: any): value is string;
/** Check if value is a number */
function isNumber(value: any): value is number;
/** Check if value is a function */
function isFunction(value: any): value is Function;
/** Check if value is an object */
function isObject(value: any): value is Record<string, any>;

// Sorting Utilities
/** Get next sort direction in cycle */
function nextSortDirection(sortingOrder: SortDirection[], current?: SortDirection): SortDirection;
/** Check if sort direction is descending */
function isDesc(direction: SortDirection): boolean;
/** Comparator for string/number values */
const stringNumberComparer: ComparatorFn;
/** Comparator for numeric values */
const numberComparer: ComparatorFn;
/** Comparator for date values */
const dateComparer: ComparatorFn;

interface CellParams {
  /** The HTMLElement that triggered the event */
  element?: HTMLElement;
  /** The column field of the cell that triggered the event */
  field: string;
  /** The cell value */
  value: CellValue;
  /** A function that lets you get data from other columns */
  getValue: (field: string) => CellValue;
  /** The full set of data of the row that the current cell belongs to */
  data: RowData;
  /** The row model of the row that the current cell belongs to */
  rowModel: RowModel;
  /** The column of the row that the current cell belongs to */
  colDef: any;
  /** The row index of the row that the current cell belongs to */
  rowIndex: number;
  /** ApiRef that lets you manipulate the grid */
  api: any;
}

interface RowParams {
  id: RowId;
  columns: Columns;
  row: RowData;
  api: GridApi;
}

interface ColParams {
  field: string;
  colDef: ColDef;
  api: GridApi;
}

interface SortModel {
  field: string;
  sort: SortDirection;
}

type SortDirection = "asc" | "desc" | null;
type ComparatorFn = (v1: CellValue, v2: CellValue) => number;

interface GridComponentOverridesProp {
  /** Custom footer component */
  Footer?: React.ComponentType<any>;
  /** Custom header component */
  Header?: React.ComponentType<any>;
  /** Custom toolbar component */
  Toolbar?: React.ComponentType<any>;
  /** Custom loading overlay */
  LoadingOverlay?: React.ComponentType;
  /** Custom no rows overlay */
  NoRowsOverlay?: React.ComponentType;
  /** Custom pagination component */
  Pagination?: React.ComponentType<any>;
  /** Custom column header component */
  ColumnHeader?: React.ComponentType<any>;
  /** Custom cell component */
  Cell?: React.ComponentType<CellParams>;
  /** Custom row component */
  Row?: React.ComponentType<any>;
}