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-
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 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', }, ] 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' // 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 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)
Good
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