The philosophy behind the mui-plus datagrid is to have component that is only concerned with the layout part of the grid. Pagination, filtering, sorting, etc... is best left to the application as it is often highly dependent on the use case. This library focuses on providing a grid component that is focused on layout, column sizing, virtualization, etc... It will never add features that can be implemented externally. If you need a well supported, feature-rich datagrid, please use the Material UI DataGrid.


The Grid component works both in uncontrolled mode and controlled mode. To use it in uncontrolled mode, pass column definitions to the defaultColumns prop.

<DataGrid data={data} defaultColumns={columns} />


If you want to manipulate the grid component from the outside, You can use the columns and onColumnsChange props to switch the column definition in controlled mode.

<DataGrid data={data} columns={columns} onColumnsChange={setColumns} />