Create a simple editable table with search and pagination in React JS in 2 min | React JS development

The tabular view with pagination is the best view to show data. If we need a listing of large data like posts, users, etc in the dashboard, then we can create a simple table view. But creating a custom table takes a long time. So here we are going to see how can we create a best practice table view in just 2 min.

Installing-

We are going to use a material-table package. We can install it by using NPM or yarn.

npm install material-table @material-ui/core
// or
yarn add material-table @material-ui/core

Optionally, you can also install material icons-

We are going to use a material-table package. We can install it by using NPM or yarn.

npm install material-table @material-ui/core
// or 
yarn add material-table @material-ui/core

To install @material-ui/icons with npm:

npm install @material-ui/icons

To install @material-ui/icons with yarn:

yarn add @material-ui/icons

Configuration-

After installing it, we can directly import it into the respected component and need some required data.

It needs an array of columns-

const columns = [
  { title: "First Name", field: "firstName" },
  {
    title: "Last Name",
    field: "lastName",
    initialEditValue: "initial value",
  },
  { title: "Mobile Number", field: "mobileNumber", type: "numeric" },
  { title: "Email", field: "email", editable: "never" },
];

Now, we need an array of data for columns. Make sure the field name should match in columns with keys of the object in data.

const data = [
  {
    firstName: "Gyanendra",
    lastName: "Knojiya",
    mobileNumber: 8802879231,
    email: "gyanendrak064@gmail.com",
  },
  {
    firstName: "Virat",
    lastName: "Kohli",
    mobileNumber: 9876543210,
    email: "virat@gmail.com",
  },
  {
    firstName: "Rohit",
    lastName: "Sherma",
    mobileNumber: 9984572157,
    email: "rohit@gmail.com",
  },
]

You can also add material icons. First, we need to import all icons and after that, we need to add icons ref for every action-

Import

import AddBox from "@material-ui/icons/AddBox";
import ArrowDownward from "@material-ui/icons/ArrowDownward";
import Check from "@material-ui/icons/Check";
import ChevronLeft from "@material-ui/icons/ChevronLeft";
import ChevronRight from "@material-ui/icons/ChevronRight";
import Clear from "@material-ui/icons/Clear";
import DeleteOutline from "@material-ui/icons/DeleteOutline";
import Edit from "@material-ui/icons/Edit";
import FilterList from "@material-ui/icons/FilterList";
import FirstPage from "@material-ui/icons/FirstPage";
import LastPage from "@material-ui/icons/LastPage";
import Remove from "@material-ui/icons/Remove";
import SaveAlt from "@material-ui/icons/SaveAlt";
import Search from "@material-ui/icons/Search";
import ViewColumn from "@material-ui/icons/ViewColumn";

Add

const tableIcons = {
  Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
  Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
  Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
  DetailPanel: forwardRef((props, ref) => (
    <ChevronRight {...props} ref={ref} />
  )),
  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
  Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
  Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
  FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
  LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
  NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
  PreviousPage: forwardRef((props, ref) => (
    <ChevronLeft {...props} ref={ref} />
  )),
  ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
  Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
  SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
  ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
  ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />),
};

Creating table

All done. Our table is ready. Not we can show data

import React, { useState, forwardRef } from "react";
import MaterialTable from "material-table";
import AddBox from "@material-ui/icons/AddBox";
import ArrowDownward from "@material-ui/icons/ArrowDownward";
import Check from "@material-ui/icons/Check";
import ChevronLeft from "@material-ui/icons/ChevronLeft";
import ChevronRight from "@material-ui/icons/ChevronRight";
import Clear from "@material-ui/icons/Clear";
import DeleteOutline from "@material-ui/icons/DeleteOutline";
import Edit from "@material-ui/icons/Edit";
import FilterList from "@material-ui/icons/FilterList";
import FirstPage from "@material-ui/icons/FirstPage";
import LastPage from "@material-ui/icons/LastPage";
import Remove from "@material-ui/icons/Remove";
import SaveAlt from "@material-ui/icons/SaveAlt";
import Search from "@material-ui/icons/Search";
import ViewColumn from "@material-ui/icons/ViewColumn";
const tableIcons = {
 Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
 Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
 Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
 Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
 DetailPanel: forwardRef((props, ref) => (
 <ChevronRight {...props} ref={ref} />
 )),
 Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
 Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
 Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
 FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
 LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
 NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
 PreviousPage: forwardRef((props, ref) => (
 <ChevronLeft {...props} ref={ref} />
 )),
 ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
 Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
 SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
 ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
 ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />),
};
const App = () => {
 const columns = [
 { title: "First Name", field: "firstName" },
 {
 title: "Last Name",
 field: "lastName",
 initialEditValue: "initial value",
 },
 { title: "Mobile Number", field: "mobileNumber", type: "numeric" },
 { title: "Email", field: "email", editable: "never" },
 ];
 const [data, setData] = useState([
 {
 firstName: "Gyanendra",
 lastName: "Knojiya",
 mobileNumber: 8802879231,
 email: "gyanendrak064@gmail.com",
 },
 {
 firstName: "Virat",
 lastName: "Kohli",
 mobileNumber: 9876543210,
 email: "virat@gmail.com",
 },
 {
 firstName: "Rohit",
 lastName: "Sherma",
 mobileNumber: 9984572157,
 email: "rohit@gmail.com",
 },
 ]);
 return (
 <>
 <h1>Editable table example</h1>
 <MaterialTable
 title="Editable Table"
 icons={tableIcons}
 columns={columns}
 data={data}
 editable={{
 onRowAdd: (newData) =>
 new Promise((resolve, reject) => {
 setTimeout(() => {
 setData([...data, newData]);
 resolve();
 }, 1000);
 }),
 onRowUpdate: (newData, oldData) =>
 new Promise((resolve, reject) => {
 setTimeout(() => {
 const dataUpdate = [...data];
 const index = oldData.tableData.id;
 dataUpdate[index] = newData;
 setData([...dataUpdate]);
 resolve();
 }, 1000);
 }),
 onRowDelete: (oldData) =>
 new Promise((resolve, reject) => {
 setTimeout(() => {
 const dataDelete = [...data];
 const index = oldData.tableData.id;
 dataDelete.splice(index, 1);
 setData([...dataDelete]);
 resolve();
 }, 1000);
 }),
 }}
 />
 </>
 );
};
export default App;

Preview-

Buy a coffee for me here https://www.buymeacoffee.com/gyanknojiya

Thanks for reading this article. You can play with this sandbox https://codesandbox.io/s/editable-example-0wctb to explore more.

If you have any queries, feel free to contact me: https://gyanendra.tech/#contact

Originally published at https://codingcafe.co.in.