DataGrid

The DataGrid component is a flexible and feature-rich table implementation designed for large datasets, supporting advanced features like sorting, filtering, pagination, and customization.

Python Dash Example

Below is an example of how to use the DataGrid component in a Python Dash application.

import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    html.Div([
      dmc.DataGrid(
        id="example-grid",
        initialState={
          "pagination": {
            "paginationModel": { "pageSize": 5, "page": 0 }
          }
        },
        pageSizeOptions=[5, 10, 50],
        checkboxSelection=True,
        rows=[
          {"id": 1, "col1": "Hello", "col2": "World"},
          {"id": 2, "col1": "Dash", "col2": "MUI"},
          {"id": 3, "col1": "React", "col2": "MUI"},
          {"id": 4, "col1": "Hello", "col2": "World"},
          {"id": 5, "col1": "Dash", "col2": "MUI"},
          {"id": 6, "col1": "React", "col2": "MUI"},
        ],
        columns=[
            {"field": "col1", "headerName": "Column 1", "width": 150},
            {"field": "col2", "headerName": "Column 2", "width": 150},
        ],
        autoHeight=True,
        disableColumnMenu=True,
        checkboxSelection=True,
      )
    ])
  ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Customized Example

Below is a customized example with additional features such as dynamic styling and column-based rendering.

React Example

Python Dash Example

Below is a Python Dash example using similar customizations.

import dash
from dash import html
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    html.Div([
      dmc.DataGrid(
        id="customized-grid",
        rows=[
            {"id": 1, "col1": "Dynamic", "col2": "Styling"},
            {"id": 2, "col1": "Custom", "col2": "Rendering"},
        ],
        columns=[
            {
                "field": "col1",
                "headerName": "Column 1",
                "width": 150,
                "align": "center",
                "headerAlign": "center",
            },
            {
                "field": "col2",
                "headerName": "Column 2",
                "width": 150,
                "align": "right",
                "headerSx": {"color": "blue"},
                "cellSx": {"color": "blue"}
            },
        ],
        autoHeight=True,
        disableColumnMenu=True,
        checkboxSelection=True,
      )
    ])
  ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Props Table

Below are the updated props for the DataGrid component:

Prop	Type	Default	Description
id	string	None	Unique identifier for the grid.
rows	array	[]	Array of data rows to be displayed.
columns	array	[]	Array of column definitions. Each column object can include `headerSx` and `cellSx` for custom styling of headers and cells.
autoHeight	boolean	false	If true, the grid adjusts height based on its content.
disableColumnMenu	boolean	false	Disables the column menu.
checkboxSelection	boolean	false	Enables checkboxes for row selection.
sortingMode	'client' or 'server'	'client'	Defines sorting mode.
selectedRows	array	[]	Array of selected row IDs.
initialState	object		Initial state of the grid.
pageSizeOptions	array	[5, 10, 20]	Array of page size options.
showToolbar	boolean	false	Shows the grid toolbar with additional features.
showQuickFilter	boolean	false	Shows a quick filter input in the toolbar.
disableColumnFilter	boolean	true	Disables column filtering functionality.
disableColumnSorting	boolean	true	Disables column sorting functionality.
disableColumnSelector	boolean	false	Disables column selector in toolbar.
disableColumnGrouping	boolean	true	Disables column grouping functionality.
disableDensitySelector	boolean	false	Disables density selector in toolbar.
rowSelection	boolean	false	Enables row selection functionality.
cellSelection	boolean	false	Enables cell selection functionality.
cellSelectionModel	object	null	Control which cells are selected.
clipboardCopyCellDelimiter	string	'\t'	The character used to separate cell values when copying to the clipboard.
splitClipboardPastedText	string	null	JavaScript function as string to customize clipboard paste behavior.
getCellClassName	string	null	JavaScript function as string to define cell class names dynamically.
density	string	'standard'	Controls the density of the grid. Options: 'compact', 'standard', 'comfortable'.
rowHeight	number	52	Height of each row in pixels.
loading	boolean	false	Shows a loading indicator.
filterMode	'client' or 'server'	'client'	Defines filtering mode.
disableExportButton	boolean	false	Disables the export button for all export options (CSV, Excel).
rowCount	number	null	Controls the number of rows shown in server-side pagination.
totalRowCount	number	null	Shows the total row count (read-only, updated by the component).
paginationMode	'client' or 'server'	'client'	Defines pagination mode.
pageSize	number	null	Controls the page size.
hideFooter	boolean	false	Hides the footer with pagination controls.

Premium Features

Prop	Type	Default	Description
pinnedColumns	object	null	Columns to pin to left or right. Format: `{ left: ['id'], right: ['actions'] }`
pinnedRows	object	null	Rows to pin to top or bottom. Format: `{ top: [row1], bottom: [row2] }`
aggregationModel	object	null	Model for column aggregation (sum, average, etc.).
treeData	boolean	false	Enables hierarchical data display in tree format.
getTreeDataPath	string	null	JavaScript function as string to get the path for tree data display.
groupingColDef	object	null	Configuration for the grouping column, supports `headerSx` and `cellSx` for styling.
getDetailPanelContent	function	null	Function to define content for row detail panels.
getDetailPanelHeight	function	null	Function to define height for row detail panels.
columnHeaderHeight	number	null	Height of column headers in pixels.
rowBufferPx	number	null	Extra buffer space for rows (in pixels).
columnBufferPx	number	null	Extra buffer space for columns (in pixels).
autoSize	boolean	false	Auto-sizes columns based on content.
autosizeOptions	object	null	Options for autosize behavior: `{ columns, skipHeader, includeHeaders, includeOutliers }`.
disableChildrenSorting	boolean	false	Disables sorting of children in tree data.
defaultGroupingExpansionDepth	number	null	Default depth to which grouped rows are expanded.

Pivoting Features

Prop	Type	Default	Description
pivotActive	boolean	false	Whether pivot mode is active.
pivotModel	object	null	Model defining the pivot configuration.
pivotPanelOpen	boolean	false	Whether the pivot configuration panel is open.
disablePivoting	boolean	false	Disables pivoting functionality.
getPivotDerivedColumns	string	null	JavaScript function as string to get derived columns for pivot mode.
pivotDerivedColumnsConfig	array	null	Configuration for automatically derived columns in pivot mode.
customPivotTransformations	object	null	Custom transformations for pivot mode.

Advanced Styling

Prop	Type	Default	Description
sx	object	null	MUI system prop for styling the grid container.
toolbarSlotProps	object	null	Additional props for the toolbar component.
columnGroupingModel	array	null	Model for column grouping.
columnVisibilityModel	object	null	Model for column visibility.
filterModel	object	null	Model for filtering data.
sortModel	array	null	Model for sorting data. Format: `[{ field: 'col1', sort: 'asc' }]`

Custom Column Options

Prop	Type	Description
headerSx	object	MUI system props for styling column headers.
cellSx	object	MUI system props for styling cells.
description	string	Adds a tooltip with description to the column header.
d3Format	string	Format string using d3-format for numerical data.
nullPlaceholder	string	Text to display for null/undefined values (default: "N/A").
valueFormatter	string	JavaScript function as string for custom value formatting.

Advanced Example: Pivot Grid

Here's an example of using the DataGrid with pivoting capabilities:

import dash
from dash import html
import yipit_dash_mui_components as dmc

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    html.Div([
      dmc.DataGrid(
        id="pivot-grid",
        rows=[
          {"id": 1, "category": "Electronics", "date": "2023-01-15", "sales": 500},
          {"id": 2, "category": "Clothing", "date": "2023-01-20", "sales": 300},
          {"id": 3, "category": "Electronics", "date": "2023-02-10", "sales": 700},
          {"id": 4, "category": "Clothing", "date": "2023-02-25", "sales": 400},
        ],
        columns=[
          {"field": "category", "headerName": "Category", "width": 150},
          {"field": "date", "headerName": "Date", "width": 150, "type": "date"},
          {"field": "sales", "headerName": "Sales", "width": 150, "type": "number"},
        ],
        pivotActive=True,
        showToolbar=True,
        pivotPanelOpen=True,
        pivotModel={
          "dimensions": [
            {"field": "category", "aggregationColumn": "sales"}
          ],
          "aggregation": {
            "sales": "sum"
          }
        },
        pivotDerivedColumnsConfig=[
          {
            "match": {"type": "date"},
            "derivedColumns": [
              {
                "suffix": "_year",
                "headerSuffix": " (Year)",
                "transformation": "date.year"
              },
              {
                "suffix": "_quarter",
                "headerSuffix": " (Quarter)",
                "transformation": "date.quarter"
              }
            ]
          }
        ],
        disablePivoting=False,
        autoHeight=True,
      )
    ])
  ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

Advanced Example: Tree Data

Here's an example of using the DataGrid with hierarchical tree data:

import dash
from dash import html
import yipit_dash_mui_components as dmc

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    html.Div([
      dmc.DataGrid(
        id="tree-grid",
        rows=[
          {"id": 1, "name": "Products", "path": ["Products"]},
          {"id": 2, "name": "Electronics", "path": ["Products", "Electronics"]},
          {"id": 3, "name": "Phones", "path": ["Products", "Electronics", "Phones"]},
          {"id": 4, "name": "Laptops", "path": ["Products", "Electronics", "Laptops"]},
          {"id": 5, "name": "Clothing", "path": ["Products", "Clothing"]},
          {"id": 6, "name": "Shirts", "path": ["Products", "Clothing", "Shirts"]},
        ],
        columns=[
          {"field": "name", "headerName": "Category", "width": 200},
        ],
        treeData=True,
        autoHeight=True,
        defaultGroupingExpansionDepth=2,
      )
    ])
  ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

For the full list of props, refer to the official MUI documentation, as this component is based on MUI:

MUI DataGrid Documentation

Python Dash Example​

Customized Example​

React Example​

Python Dash Example​

Props Table​

Premium Features​

Pivoting Features​

Advanced Styling​

Custom Column Options​

Advanced Example: Pivot Grid​

Advanced Example: Tree Data​

Python Dash Example

Customized Example

React Example

Python Dash Example

Props Table

Premium Features

Pivoting Features

Advanced Styling

Custom Column Options

Advanced Example: Pivot Grid

Advanced Example: Tree Data