DEV Community

Gyanendra Kumar Knojiya
Gyanendra Kumar Knojiya

Posted on • Originally published at gyanendraknojiya.Medium on

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

#editabletable #frontend #reactjsdevelopment #reactjstutorials

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

image

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
Enter fullscreen mode Exit fullscreen mode

Optionally, you can also install material icons-

To install @material-ui/icons with npm:

npm install @material-ui/icons
Enter fullscreen mode Exit fullscreen mode

To install @material-ui/icons with yarn:

yarn add @material-ui/icons
Enter fullscreen mode Exit fullscreen mode

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' },
]
Enter fullscreen mode Exit fullscreen mode

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.

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',
  },
]
Enter fullscreen mode Exit fullscreen mode
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-

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'
Enter fullscreen mode Exit fullscreen mode

// 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} />),
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Preview-

image

buy a coffee for me 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.

Top comments (2)

Collapse
 
hayatsharoon profile image
SHAROON HAYAT • • Edited

Great things are taught by great developers thanks for sharing i am very thankfull to you . I want to talk with you in DM or Email are you available and do you have youtube channels

Collapse
 
bishnuthapako profile image
Bishnu Bahadur Thapa •

Good

Read next

nozibul_islam_113b1d5334f profile image

New to Frontend Engineering: 8 Things To Stop Doing

Nozibul Islam -

kairoeder profile image

Storybook: The Workshop for Modern Frontends

Kai Röder -

it_vturbo profile image

The Evolution of Frontend Development: Exploring Different Architectures

Valentin Turbins -

arnab2001 profile image

MUI Stack: Mastering One-Dimensional Layouts in React

Arnab Chatterjee -