5.1.4
Powered by Modulz

DataGrid

The DataGrid presents information in a structured format of rows and columns.

() => {

  const {searchData: rows} = data;

  const columns = Object.keys(data.searchData[0]).map((c) => ({ field: c, renderCell: (params) => {

        const { field, id, row } = params;

        if(field==='disabled') {

          return (<Checkbox disabled checked={row.disabled} />)

        }

  } }))

  const handleSearch = () => {

    console.log('handleSearch called');

  }

  const handleAction = () => {

    console.log('handleAction called');

  }



  return (

    <DataGrid

      getRowId={(row) => row.id}

      columns = {columns}

      rows = {rows}

      autoHeight={true}

      toolbar={<GridToolbar

        search

        onSearchClick={handleSearch}

        actions={<><Button onClick={handleAction}>Custom Action</Button></>}

        download

        downloadFileName="foobar"/>}

    />

  )

 }

Props

PropTypeDefaultDescription
getRowId(row: TRow) => stringId generator function.
columnsColumnDefintion<TRow extends object>Set of columns of type GridColDef[].
rowsArray<TRow>Set of rows of type GridRowsProp.
headerHeightnumber50If true, a loading overlay is displayed.
loadingbooleanfalseIf true, a loading overlay is displayed.
heightstring | undefinedValue passed directly to the height style-like property. height or autoHeight is required.
autoHeightbooleanfalseIf true, the grid height is dynamic and follow the number of rows in the grid. height or autoHeight is required
paginationModeclient | serverclientPagination can be processed on the server or client-side. Set it to client if you would like to handle the pagination on the client-side. Set it to server if you would like to handle the pagination on the server-side.
paginationbooleanfalsePagination component rendered in the grid footer by default.
rowCountnumberundefinedSet the total number of rows, if it is different from the length of the value rows prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows.
rowsPerPageOptionsArray<number>[25, 50, 100]Select dropdown will be filled with these values, calling onPageSizeChange when modified
pageSizenumber100Set the number of rows in one page. If some of the rows have children (for instance in the tree data), this number represents the amount of top level rows wanted on each page.
onPageSizeChange(pageSize: number) => void;undefinedCallback fired when the page size has changed.
pagenumber0The zero-based index of the current page.
onPageChange(page: size) => voidundefinedCallback fired when the current page has changed.
onSortModelChange() => voidundefinedCallback fired when the sort model changes before a column is sorted.
sortingModeclient | serverclientSorting can be processed on the server or client-side. Set it to client if you would like to handle sorting on the client-side. Set it to server if you would like to handle sorting on the server-side.
checkboxSelectionbooleanfalseIf true, the grid get a first column with a checkbox that allows to select rows.
onSelectionModelChange() => voidundefinedCallback fired when the selection state of one or multiple rows changes.
keepNonExistentRowsSelectedbooleanfalseIf true, the selection model will retain selected rows that do not exist. Useful when using server side pagination and row selections need to be retained when changing pages.
selectionModelArray<string>[]Set the selection model of the grid.
disableSelectionOnClickbooleanfalseIf true, the selection on click on a row or cell is disabled.
disableColumnMenubooleanfalseIf true, the column menu is disabled.
toolbarReact.ReactNodeundefinedElement to be rendered at the top of the grid, see <GridToolbar />.

Examples

DataGrid with checkboxes

() => {

  const {searchData: rows} = data;

  const columns = Object.keys(data.searchData[0]).map((c) => ({ field: c }))



  return (

    <DataGrid

      getRowId={(row) => row.id}

      columns = {columns}

      rows = {rows}

      autoHeight={true}

      checkboxSelection

    />

  )

 }

DataGrid Paginations on Client Side

() => {

  const {searchData: rows} = data;

  const columns = Object.keys(data.searchData[0]).map((c) => ({ field: c }))

  const [pageSize, setPageSize] = React.useState(5);



  return (

    <DataGrid

      getRowId={(row) => row.id}

      columns={columns}

      rows={rows}

      autoHeight={true}

      pagination

      rowsPerPageOptions={[5, 10, 20]}

      pageSize={pageSize}

      onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}

      paginationMode="client"

    />

  )

 }

DataGrid ToolBar

() => {

  const {searchData: rows} = data;

  const columns = Object.keys(data.searchData[0]).map((c) => ({ field: c }))

  const [pageSize, setPageSize] = React.useState(5);



  return (

    <DataGrid

      getRowId={(row) => row.id}

      columns={columns}

      rows={rows}

      autoHeight={true}

      pagination

      rowsPerPageOptions={[5, 10, 20]}

      pageSize={pageSize}

      onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}

      paginationMode="client"

    />

  )

 }