Package Exports

customize-data-grid
customize-data-grid/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (customize-data-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Customize Data Grid

Quickly Create Drag And Drop Tables With The Power Of Material UI Data Grid Table 🎉✌️

Getting Started

Please follow the step-by-step guide below.

Installation

Before installing customize-data-grid make sure you have already installed all Material Ui all dependencies:

  npm install @mui/material @emotion/react @emotion/styled @mui/icons-material @mui/x-data-grid 
  or
  yarn add @mui/material @emotion/react @emotion/styled @mui/icons-material @mui/x-data-grid

Install customize-data-grid with npm or yarn

  npm i customize-data-grid
  or
  yarn add customize-data-grid

Usage/Examples

Basic Usage:

import React, { useState } from "react";
import { CustomizeDataGrid, useRowDragging } from "customize-data-grid";

const columns = [
  { field: "id", headerName: "ID", width: 90 },
  {
    field: "firstName",
    headerName: "First name",
    width: 150,
    editable: true,
  },
  {
    field: "lastName",
    headerName: "Last name",
    width: 150,
    editable: true,
  },
  {
    field: "fullName",
    headerName: "Full name",
    description: "This column has a value getter and is not sortable.",
    sortable: false,
    width: 160,
    valueGetter: (params) =>
      `${params.row.firstName || ""} ${params.row.lastName || ""}`,
  },
];

const rowsData = [
  { id: 1, lastName: "Snow", firstName: "Jon" },
  { id: 2, lastName: "Lannister", firstName: "Cersei" },
  { id: 3, lastName: "Lannister", firstName: "Jaime" },
  { id: 4, lastName: "Stark", firstName: "Arya" },
  { id: 5, lastName: "Targaryen", firstName: "Daenerys" },
];

const App = () => {
  const [rows, setRows] = useState(rowsData);
  const { DragableRows } = useRowDragging(rows, setRows);

  return (
    <>
      <CustomizeDataGrid
        rows={rows}
        columns={columns}
        initialState={{
          pagination: {
            paginationModel: {
              pageSize: 5,
            },
          },
        }}
        pageSizeOptions={[5, 10, 25, 50, 100]}
        dragableRowsIcon
        slots={{
          cell: DragableRows(),
        }}
      />
    </>
  );
};

export default App;

Full Usage:

import React, { useState } from "react";
import { CustomizeDataGrid, useRowDragging } from "customize-data-grid";

const columns = [
  { field: "id", headerName: "ID", width: 90 },
  {
    field: "firstName",
    headerName: "First name",
    width: 150,
    editable: true,
  },
  {
    field: "lastName",
    headerName: "Last name",
    width: 150,
    editable: true,
  },
  {
    field: "fullName",
    headerName: "Full name",
    description: "This column has a value getter and is not sortable.",
    sortable: false,
    width: 160,
    valueGetter: (params) =>
      `${params.row.firstName || ""} ${params.row.lastName || ""}`,
  },
];

const rowsData = [
  { id: 1, lastName: "Snow", firstName: "Jon" },
  { id: 2, lastName: "Lannister", firstName: "Cersei" },
  { id: 3, lastName: "Lannister", firstName: "Jaime" },
  { id: 4, lastName: "Stark", firstName: "Arya" },
  { id: 5, lastName: "Targaryen", firstName: "Daenerys" },
];

const App = () => {
  const [rows, setRows] = useState(rowsData);

  const apiCall = async (updatedRows, dragRow) => {
    try {
      // write your api or any custom logic here......
      console.log({ updatedRows, dragRow });
    } catch (err) {
      console.log(err, "------err");
    }
  };

  const { DragableRows } = useRowDragging(rows, setRows, apiCall);

  const callback = (colParams) => {
    console.log("colParams:", colParams);
    if (colParams?.hasFocus) {
      // custom logic here......
    }
  };

  return (
    <>
      <CustomizeDataGrid
        rows={rows}
        columns={columns}
        initialState={{
          pagination: {
            paginationModel: {
              pageSize: 5,
            },
          },
        }}
        pageSizeOptions={[5, 10, 25, 50, 100]}
        dragableRowsIcon
        slots={{
          cell: DragableRows(callback, {
            hasFocus: false,
            width: 120,
            //.....
          }),
        }}
      />
    </>
  );
};

export default App;

API Reference

dragableRowsIcon

CustomizeDataGrid props

Parameter	Type	Default	Description
`dragableRowsIcon`	`boolean`	`false`	Required. for showing drag column with icon

DragableRows(callback, colProps)

CustomizeDataGrid function use for drag and drop functionality

Parameter	Type	Default	Description
`callback`	`function`	`null`	Optional. for doing addtional functional with `colParams` provided by `Material Ui`
`colProps`	`object`	`{}`	Optional. for set the `colParams` props

useRowDragging(rows, setRows, apiCall)

CustomizeDataGrid hook

Parameter	Type	Default	Description
`rows`	`array`	`any`	Required. render rows on the table. `useState` variable
`setRows`	`function`	`any`	Required. rows setter function. `useState` function
`apiCall`	`function`	`any`	Optional. for doing action when the dragging end

Badges

License

MIT

🚀 About Me

I'm Amaan Ansari (Aman Asif), a Full Stack Developer. As a full-stack developer, I have 2+ years of experience. Among the technologies I am proficient in are ReactJS and NodeJS, as well as databases such as MongoDB and MySQL. My experience comes from managing projects, working with teams, and handling associate developers on multiple projects.