Create a simple editable table with search and pagination in React JS in 2 min | React JS…
Tags: editabletable, frontend, reactjsdevelopment, reactjstutorials
Published: 2021-11-13 15:39:53

---
title: Create a simple editable table with search and pagination in React JS in 2 min | React JS…
published: true
date: 2021-11-01 18:22:03 UTC
tags: editabletable,frontenddevelopment,reactjsdevelopment,reactjstutorials
canonical_url: https://gyanendraknojiya.medium.com/create-a-simple-editable-table-with-search-and-pagination-in-react-js-in-2-min-react-js-56328e067733
---

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

![image](https://cdn-images-1.medium.com/max/1024/0*eqK_VyWoJwpg7aIA.jpg)


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.

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

**Optionally, you can also install material icons-**

To install @material-ui/icons with npm:

```bash
npm install @material-ui/icons
```

To install @material-ui/icons with yarn:

```bash
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-

```js
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 for columns. Make sure field name should match in columns with keys of of object in data.

```js
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',
  },
]
```

###### **Action Icons-**

###### 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-**

```js
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-**

```js
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

```js
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-

![image](https://cdn-images-1.medium.com/max/1024/0*PAb4C6WqBMjAvZgn.png)

buy a coffee for me [https://www.buymeacoffee.com/gyanknojiya](https://www.buymeacoffee.com/gyanknojiya)

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

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

_Originally published at_ [_https://codingcafe.co.in_](https://codingcafe.co.in/post/create-simple-editable-table-with-search-and-pagination-in-react-js-in-2-min-%7C-react-js-development)_._