mui-datagrid-full-edit

Overview

mui-datagrid-full-edit is a fully functional grid component with create, read, update and delete (CRUD) functionality. However, you can use it very simply with just a few prop settings.

It provides an easy way to use @mui/x-data-grid. If you think @mui/x-data-grid would be good for your admin page but find it a bit difficult, mui-datagrid-full-edit would be the best choice.

It can offer you a great React data grid that is easy to use but comes with full functionality. It comes with features such as pagination, column hiding, CSV and Excel export options, and advanced filtering by default.

mui-datagrid-full-edit's toolbar has an export button to download grid data as an Excel file (*.xlsx). @mui/x-data-grid-pro and @mui/x-data-premium provide this feature for a license fee, but mui-datagrid-full-edit provides it at no cost.

The current version of mui-datagrid-full-edit depends on v6.0.4 of @mui/x-data-grid.

How to Use

Examples

• Sample 1

  View Sample1 on CodeSandbox

  View Sample1 on GitHub

Install

1$ npm install mui-datagrid-full-edit

or

1$ yarn add mui-datagrid-full-edit

Simple Usage

Here is an example of mui-datagrid-full-edit.

1import FullEditDataGrid from "mui-datagrid-full-edit";
2
3...
4
5<FullEditDataGrid
6    columns={columns}
7    rows={rows}
8    onSaveRow={onSaveRow}
9    onDeleteRow={onDeleteRow}
10    createRowData={createRowData}
11/>

columns, rows, onSaveRow, onDeleteRow, createRowData are required props.

Props

• columns (Array): Definition of grid header. It is the same as @mui/x-data-grid and the documentation is here.

  Here is an example of columns.

  1const columns = [
  2  {
  3    field: "id",
  4    headerName: "Id",
  5    width: 50,
  6    hide: true,
  7    align: "center",
  8    type: "number",
  9    editable: false,
  10  },
  11  {
  12    field: "title",
  13    headerName: "Title",
  14    width: 150,
  15    headerAlign: "center",
  16    type: "string",
  17    align: "center",
  18    editable: true,
  19  },
  20  {
  21    field: "dateCreated",
  22    headerName: "DateCreated",
  23    width: 150,
  24    headerAlign: "center",
  25    type: "date",
  26    editable: false,
  27    align: "center",
  28    renderCell: ({ value }) => moment(value).format("MM/DD/yyyy"),
  29  },
  30];

• rows (Array): data of the grid.

  Here is an example of rows.

  1let rows = [
  2  {
  3    id: 1,
  4    title: "Cycle-Depot",
  5    dateCreated: new Date("2023-03-09"),
  6  },
  7  {
  8    id: 2,
  9    title: "Top Lowrider",
  10    dateCreated: new Date("2023-03-09"),
  11  },
  12];

• onSaveRow (Function): save action handler. When you do save action on the grid, this handler will be performed.

  The function is for server communication. If your saving on server is success, you need to update rows in the function to repaint the result of communication.

  Here is an example of onSaveRow.

  1const [rows, setRows] = useState([]);
  2
  3...
  4
  5/*
  6    id: id value of saved row
  7    updateRow: entire data or saved row
  8    rows: all entire old rows of grid
  9    oldRow: data of row before you update.
  10*/
  11const onSaveRow = (id, updatedRow, oldRow, oldRows) => {
  12sellerController // server communication controller
  13  .saveRow(updatedRow) // send row data of the component
  14  .then((res) => {
  15    console.log("server saving success!");
  16    const dbRow = res.data; // get exact row data of server from response
  17    setRows(oldRows.map((r) => (r.id === updatedRow.id ? { ...dbRow } : r))); // syncronize server and component
  18  })
  19  .catch((err) => {
  20    console.log("server saving failed!");
  21    setRows(oldRows); // update nothing on component by old rows
  22  });
  23};

• onDeleteRow (Function): delete action handler. When you do delete action on the grid, this handler will be performed.

  The function is for server communication. If your deleting on server is success, you need to update rows in the function to repaint the result of communication.

  Here is an example of onDeleteRow.

  1const [rows, setRows] = useState([]);
  2
  3...
  4
  5/*
  6    id: id value of deleted row
  7    oldRow: data of row before you update.
  8    rows: all entire old rows of grid
  9*/
  10const onDeleteRow = (id, oldRow, oldRows) => {
  11sellerController
  12  .deleteRow(id)
  13  .then((res) => {
  14    console.log("server deleting success!");
  15    const dbRowId = res.data.id; // get exact deleted id of server from response
  16    setRows(oldRows.filter((r) => r.id !== dbRowId)); // remove row in component
  17  })
  18  .catch((err) => {
  19    console.log("server deleting failed!");
  20    setRows(oldRows); // update nothing on component by old rows
  21  });
  22};

• createRowData (Function): function to generate data of new row. When you do create new row action, new row will be inserted with data from the function into the component. You can unset this prop. If you unset, new data will have only max id value by default. Here is an example of createRowData.

  1/*
  2    rows: all entire old rows of grid
  3*/
  4const createRowData = (oldRows) => {
  5  const newId = Math.max(...rows.map((r) => (r.id ? r.id : 0) * 1)) + 1;
  6  return { id: newId, title: "Default Name" };
  7};

• noActionColumn (boolean): hide/show action column.

  1/*
  2    a grid without an action column
  3*/
  4<FullEditDataGrid
  5    columns={columns}
  6    rows={rows}
  7    onSaveRow={onSaveRow}
  8    onDeleteRow={onDeleteRow}
  9    createRowData={createRowData}
  10    noActionColumn        
  11/>

Advanced Usage

If you want more functions in the component, you can use any props of @mui/x-data-grid on this component element.

In this case, you need to know props of @mui/data-grid in more detail here.

Here is an example.

1<DeleteOnlyDataGrid
2  columns={columns}
3  rows={rows}
4  onDeleteRow={onDeleteRow}
5  selectionModel={selectionModel} // this props comes from @mui/x-data-grid
6  loading={loading} // this props comes from @mui/x-data-grid
7/>

@mui/x-data-grid

@mui/x-data-grid is a data grid library for React users, created by the Material UI team. It features powerful filtering, sorting, and pagination functionality, as well as customizable column headers and cell rendering. Its API is extremely flexible, enabling users to implement various use cases without much difficulty. The library is built with performance in mind, making it an excellent choice for handling large datasets or complex UI scenarios.

The documentation of @mui/x-data-grid is here. While reading, please remember that it is @mui/x-data-grid, not @mui/x-data-grid-pro or @mui/x-data-grid-premium.

Please Be A Contributor !

This module is always integrated with the latest version of @mui/x-data-grid. But @mui/x-data-grid might be updated and I might miss it. So I want your help.

And it aims to be not only easy way of @mui/x-data-grid, but also having useful abilities of @mui/x-data-grid-pro and @mui/x-data-grid-premium.

So, if you have a good idea, please feel free to make a pull request and an issue.

GitHub Repository: https://github.com/prettyblueberry/mui-datagrid-full-edit

Contact

Its author's GitHub

Contact to the author