React js / Material UI

Material Table / data-grid

December 01, 2021

mui-data-table




Data table

This package is the community edition of the data grid component. It's part of Material-UI X, an open core extension of Material-UI, with advanced components.

Installation / Install From NPM

Install the package in your project directory with:

// with npm

npm install @material-ui/data-grid

// with yarn
yarn add @material-ui/data-grid

This component has two peer dependencies that you will need to install as well.

"peerDependencies": {
  "@material-ui/core": "^4.12.0 || ^5.0.0-beta.0",
  "react": "^17.0.0"
},


Data table Source Code :

The Table component has a close mapping to the native <table> elements. This constraint makes building rich data tables challenging.

The DataGrid component is designed for use-cases that are focused around handling a large amounts of tabular data. While it comes with a more rigid structure, in exchange, you gain more powerful features.

Source Code


DataGrid component :: 
you can use this Data Grid Component as a Table

Installation : x-data-grid

Using your favorite package manager, install @mui/x-data-grid-pro for the full-featured enterprise grid, or @mui/x-data-grid for the free community version.

// with npm
npm install @mui/x-data-grid

// with yarn
yarn add @mui/x-data-grid

import  DataGrid component , here is the example..


  import { DataGrid } from '@mui/x-data-grid';
 


This component has two peer dependencies that you will need to install as well.

"peerDependencies": {
  "@material-ui/core": "^4.12.0 || ^5.0.0-beta.0",
  "react": "^17.0.0"
},

Here you can find, the DataGrid component having in Material UI, by using this grid you can import API data OR you can use data, which is having in js data types, here you can see the example

 
  import * as React from 'react';
  import { DataGrid } from '@mui/x-data-grid';
  import {Container} from '@material-ui/core';

  const columns = [
    {
      field: 'firstName',
      headerName: 'First name',
      width: 150,
      editable: true,
    },
    {
      field: 'lastName',
      headerName: 'Last name',
      width: 150,
      editable: true,
    },
    {
      field: 'age',
      headerName: 'Age',
      type: 'number',
      width: 110,
      editable: true,
    },
   
  ];

  const rows = [
    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
    { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
    { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
  ];

  export default function DataGridDemo() {
    return (
      <div style={{ height: 400, width: '100%' }}>
        <Container>
          <DataGrid
            rows={rows}
            columns={columns}
            pageSize={5}
            rowsPerPageOptions={[5]}
            // checkboxSelection
            // disableSelectionOnClick
          />
        </Container>
      </div>
    );
  }