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

Gyanendra Kumar Knojiya
5 min readNov 1, 2021

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.

--

--