How to implement DataTable in React
📅August 22, 2020
Today we will show you how to implement DataTable in React. There are many tables available in ReactJS but the datatable is a table component that is available with advanced options.
In this article, we will create a demo that contains a simple datatable with sorting and pagination functionality.
Steps to implement DataTable in React
- Create react application
- Install datatable package
- Integrate datatable with sorting and pagination
- Output
1. Create react application
Let’s create a simple react app using `create-react-app`. Run the following command to create an application.
npx create-react-app react-datatable-example
2. Install datatable package
To integrate datatable, we will have to install the react-data-table-component npm package in the application.
Here we have to install the `styled-components` along with the `react-data-table-component` package. Execute the following command to install datatable.
npm install react-data-table-component styled-components
3. Integrate datatable with sorting and pagination
Let’s split the datatable integration into the below points.
- Use the sample data JSON to show the data into the table.
- Create a list of columns by using `name`, `selector` and `sortable` attributes. Visit columns props for more advanced features.
- Import the `react-data-table-component` package in the react component.
- Render the `DataTable` component by passing the columns, data, pagination and other attributes.
Check out the following code to integrate DataTable.
data.json
[
{
"name": "Katelyn T. Boyle",
"phone": "1-389-886-8523",
"email": "mi.lacinia@laciniamattis.edu",
"dob": "07/11/1997"
},
{
"name": "September Y. Forbes",
"phone": "879-4512",
"email": "Proin.mi.Aliquam@arcuVestibulum.org",
"dob": "01/11/1968"
},
{
"name": "Kaseem T. Potts",
"phone": "612-9561",
"email": "tempus.lorem@luctussitamet.org",
"dob": "11/04/1995"
},
{
"name": "Maite Mcintosh",
"phone": "1-727-227-3534",
"email": "sagittis.Duis@tellusPhaselluselit.net",
"dob": "30/08/1988"
},
{
"name": "Kerry Calderon",
"phone": "1-730-492-6543",
"email": "Integer.sem@nisi.org",
"dob": "07/11/1973"
},
{
"name": "Hakeem W. Fowler",
"phone": "897-7252",
"email": "et.arcu@Quisque.co.uk",
"dob": "10/06/1987"
},
{
"name": "Steel Bruce",
"phone": "1-233-437-3487",
"email": "Donec.nibh.enim@ametnulla.net",
"dob": "06/08/1978"
},
{
"name": "Joseph Henderson",
"phone": "1-881-206-0743",
"email": "Sed.nec@risusDonecegestas.ca",
"dob": "14/06/1988"
},
{
"name": "Quinn L. Lamb",
"phone": "999-8845",
"email": "accumsan.laoreet.ipsum@Donecnibh.com",
"dob": "24/08/1998"
},
{
"name": "Hadley Shields",
"phone": "1-690-958-1438",
"email": "ante.dictum@ornareegestas.ca",
"dob": "11/09/1985"
},
{
"name": "Tara S. Clarke",
"phone": "539-3379",
"email": "posuere.enim.nisl@faucibusidlibero.ca",
"dob": "18/07/1974"
},
{
"name": "Travis Zamora",
"phone": "1-410-239-6938",
"email": "Nam@fringilla.edu",
"dob": "16/03/1980"
},
{
"name": "Hilel Chandler",
"phone": "1-842-693-3527",
"email": "placerat.augue.Sed@velitegestas.com",
"dob": "01/07/1983"
},
{
"name": "Maisie Phelps",
"phone": "1-695-407-3574",
"email": "nisi.nibh@Fuscefeugiat.org",
"dob": "13/10/1980"
},
{
"name": "Heidi Montgomery",
"phone": "1-264-258-4447",
"email": "vulputate.posuere.vulputate@ametornarelectus.com",
"dob": "10/12/1971"
},
{
"name": "Jackson Oneil",
"phone": "1-638-155-3149",
"email": "tempor.arcu@sed.ca",
"dob": "13/08/1983"
},
{
"name": "Savannah Q. Osborn",
"phone": "392-6188",
"email": "hendrerit.neque@Nuncquis.net",
"dob": "18/06/1999"
},
{
"name": "Lesley C. Le",
"phone": "828-1474",
"email": "consectetuer@libero.org",
"dob": "30/11/1978"
},
{
"name": "Brenden R. Vaughn",
"phone": "1-651-993-5457",
"email": "lectus.pede.et@ultricies.org",
"dob": "09/08/1984"
},
{
"name": "Beverly V. Mosley",
"phone": "1-880-511-8690",
"email": "Integer@Curabitur.com",
"dob": "13/10/1975"
},
{
"name": "Aquila H. Riddle",
"phone": "1-519-622-5158",
"email": "ut@congue.co.uk",
"dob": "18/12/1990"
},
{
"name": "Daryl V. Strong",
"phone": "891-6228",
"email": "magna@accumsan.co.uk",
"dob": "26/06/2000"
},
{
"name": "Garth Hooper",
"phone": "1-974-801-0172",
"email": "pellentesque.tellus@Pellentesquehabitant.edu",
"dob": "10/05/1981"
},
{
"name": "Lev Fisher",
"phone": "1-774-490-6618",
"email": "Curabitur@mollisnon.com",
"dob": "17/11/1975"
},
{
"name": "Jaden Caldwell",
"phone": "1-893-290-7035",
"email": "eu.eleifend.nec@feugiatSednec.edu",
"dob": "01/11/1991"
},
{
"name": "Courtney B. Leon",
"phone": "747-1596",
"email": "eu.eleifend.nec@mienimcondimentum.org",
"dob": "01/11/1985"
},
{
"name": "Meredith Z. Martinez",
"phone": "1-523-283-9358",
"email": "montes.nascetur@vellectus.co.uk",
"dob": "04/07/1988"
},
{
"name": "Pamela G. Roach",
"phone": "1-956-188-5509",
"email": "metus.In@iaculisodio.edu",
"dob": "10/01/1983"
},
{
"name": "Nolan Kirk",
"phone": "580-5661",
"email": "quam.quis.diam@aliquetsem.com",
"dob": "31/05/1977"
},
{
"name": "Damon Stokes",
"phone": "376-6414",
"email": "neque@infaucibus.net",
"dob": "21/02/1997"
},
{
"name": "Ila Daugherty",
"phone": "207-9279",
"email": "elit@Etiam.com",
"dob": "11/08/1973"
},
{
"name": "Florence M. Booth",
"phone": "1-679-613-5539",
"email": "quam.quis.diam@pulvinararcuet.ca",
"dob": "30/08/1969"
},
{
"name": "Dorian Luna",
"phone": "1-711-593-5673",
"email": "penatibus.et.magnis@molestiein.edu",
"dob": "29/06/1976"
},
{
"name": "Ira Crawford",
"phone": "390-0417",
"email": "lorem@vulputateullamcorpermagna.net",
"dob": "14/05/1992"
},
{
"name": "Christopher I. Davenport",
"phone": "513-0131",
"email": "mi@dapibus.com",
"dob": "04/01/1986"
},
{
"name": "Kiona Pollard",
"phone": "468-8632",
"email": "eu.tellus.eu@mauris.com",
"dob": "16/11/1976"
},
{
"name": "Blossom Barry",
"phone": "164-3542",
"email": "eros@primisinfaucibus.org",
"dob": "24/05/1995"
},
{
"name": "Janna Snider",
"phone": "1-879-238-4633",
"email": "ac.libero.nec@ipsumdolor.net",
"dob": "20/04/1988"
},
{
"name": "Larissa Hampton",
"phone": "1-766-588-2166",
"email": "Donec@interdum.org",
"dob": "07/12/1988"
},
{
"name": "Declan O. Kim",
"phone": "752-0415",
"email": "elit.Curabitur@ut.net",
"dob": "24/10/1986"
},
{
"name": "Philip Owen",
"phone": "246-6791",
"email": "nec.ligula.consectetuer@risusDonecnibh.co.uk",
"dob": "25/12/1986"
},
{
"name": "Vance Ratliff",
"phone": "440-5801",
"email": "fermentum.risus@dolor.com",
"dob": "14/12/1979"
},
{
"name": "Dorothy E. Garrison",
"phone": "1-619-930-8150",
"email": "sem.egestas@lacus.ca",
"dob": "04/11/1974"
},
{
"name": "Tatyana T. Day",
"phone": "1-391-764-1647",
"email": "Mauris.vel@perconubianostra.ca",
"dob": "03/06/1982"
},
{
"name": "Drew Kennedy",
"phone": "1-577-704-7362",
"email": "Maecenas@magnaSedeu.net",
"dob": "08/02/1968"
},
{
"name": "Coby Sanford",
"phone": "793-9294",
"email": "risus@in.com",
"dob": "03/01/1991"
},
{
"name": "Hayfa W. Melton",
"phone": "562-7157",
"email": "molestie@quamPellentesque.org",
"dob": "21/03/1988"
},
{
"name": "Uta Stuart",
"phone": "210-1895",
"email": "in.consectetuer.ipsum@lobortisClassaptent.com",
"dob": "04/03/1982"
},
{
"name": "Jemima Houston",
"phone": "1-349-409-5624",
"email": "felis.Nulla.tempor@inmolestietortor.ca",
"dob": "06/11/1968"
},
{
"name": "Cailin M. Sanford",
"phone": "220-9543",
"email": "pretium.aliquet.metus@consectetuereuismod.edu",
"dob": "03/02/1971"
},
{
"name": "Kibo H. Atkinson",
"phone": "468-6253",
"email": "ac@ultricesDuisvolutpat.com",
"dob": "23/11/1974"
},
{
"name": "Mason Q. Hopper",
"phone": "1-416-117-9588",
"email": "lacinia.at@massaMauris.co.uk",
"dob": "31/01/1971"
},
{
"name": "Rogan White",
"phone": "318-1198",
"email": "tellus.justo@molestiepharetranibh.edu",
"dob": "27/06/1985"
},
{
"name": "Kibo Petty",
"phone": "1-795-166-9081",
"email": "in@Sedneque.com",
"dob": "08/03/1982"
},
{
"name": "Wynne Wolf",
"phone": "664-1755",
"email": "enim.Etiam.gravida@aliquetodioEtiam.com",
"dob": "14/06/1985"
},
{
"name": "Piper Mccormick",
"phone": "1-816-664-9420",
"email": "Duis@turpis.co.uk",
"dob": "22/05/1987"
},
{
"name": "Tanek Browning",
"phone": "885-2917",
"email": "eget@magnis.org",
"dob": "29/10/1983"
},
{
"name": "Linus T. Harding",
"phone": "151-2485",
"email": "faucibus@dignissimlacus.com",
"dob": "03/06/1971"
},
{
"name": "Desirae Z. Brock",
"phone": "1-806-971-4667",
"email": "gravida.molestie.arcu@purus.edu",
"dob": "04/09/1995"
},
{
"name": "Donna Cunningham",
"phone": "1-787-837-4123",
"email": "vitae.semper@commodoauctor.com",
"dob": "02/04/1994"
},
{
"name": "Octavius J. Navarro",
"phone": "301-5545",
"email": "turpis.Aliquam@Cumsociis.edu",
"dob": "23/07/1979"
},
{
"name": "Jane Mann",
"phone": "692-0585",
"email": "facilisis.non@risusDonec.edu",
"dob": "06/05/1992"
},
{
"name": "Brielle Wallace",
"phone": "1-942-665-9007",
"email": "sem@viverraDonec.org",
"dob": "30/08/1974"
},
{
"name": "Malcolm Velez",
"phone": "1-638-145-7361",
"email": "ullamcorper.magna@Vivamuseuismod.net",
"dob": "23/03/1985"
},
{
"name": "Karina Ochoa",
"phone": "1-374-187-8585",
"email": "vitae.mauris.sit@ultriciesdignissim.com",
"dob": "19/01/1987"
},
{
"name": "Cherokee N. Paul",
"phone": "1-897-458-7214",
"email": "velit.justo@Maurisblandit.co.uk",
"dob": "29/10/1979"
},
{
"name": "Wang Spears",
"phone": "1-745-264-0768",
"email": "elementum@ligulaAeneangravida.co.uk",
"dob": "28/11/1986"
},
{
"name": "Leila F. Pittman",
"phone": "980-6400",
"email": "at@Donecat.ca",
"dob": "11/06/1999"
},
{
"name": "Bevis Benton",
"phone": "1-670-320-1073",
"email": "Mauris.blandit@necorciDonec.net",
"dob": "18/10/1991"
},
{
"name": "Vivian N. Quinn",
"phone": "1-945-440-8685",
"email": "mi.fringilla.mi@orciUt.com",
"dob": "08/02/1983"
},
{
"name": "Delilah X. Henderson",
"phone": "410-5213",
"email": "bibendum.Donec@Praesenteunulla.com",
"dob": "07/09/1972"
},
{
"name": "Harrison Alston",
"phone": "814-6328",
"email": "Integer.vulputate.risus@cursusluctusipsum.com",
"dob": "20/02/1971"
},
{
"name": "Rhea B. Lambert",
"phone": "1-185-364-7519",
"email": "a@sedduiFusce.org",
"dob": "16/09/1993"
},
{
"name": "Dennis M. Munoz",
"phone": "198-7742",
"email": "dapibus@Lorem.org",
"dob": "10/08/1995"
},
{
"name": "Caldwell Shelton",
"phone": "410-3089",
"email": "eget.ipsum@ultriciesadipiscingenim.com",
"dob": "18/09/1975"
},
{
"name": "Amir Juarez",
"phone": "1-999-456-1203",
"email": "et.pede.Nunc@enim.ca",
"dob": "10/02/1975"
},
{
"name": "Fredericka Fry",
"phone": "251-2786",
"email": "a.arcu@inlobortistellus.co.uk",
"dob": "08/07/1979"
},
{
"name": "Jesse G. Nichols",
"phone": "574-8398",
"email": "sem.vitae.aliquam@pede.org",
"dob": "24/06/1973"
},
{
"name": "Shana Duncan",
"phone": "739-2387",
"email": "pede.Nunc@fermentumrisus.edu",
"dob": "20/08/1993"
},
{
"name": "Shafira Morris",
"phone": "1-758-466-1432",
"email": "faucibus.orci.luctus@estac.com",
"dob": "13/03/1976"
},
{
"name": "Indigo Cruz",
"phone": "1-301-287-4515",
"email": "feugiat.non.lobortis@fermentumrisusat.net",
"dob": "09/01/1982"
},
{
"name": "Hilda Nguyen",
"phone": "507-8349",
"email": "vel@vitae.net",
"dob": "13/04/1979"
},
{
"name": "Tucker D. Guy",
"phone": "1-963-823-0346",
"email": "tincidunt.aliquam.arcu@aliquameros.co.uk",
"dob": "22/01/1983"
},
{
"name": "Guinevere I. Parsons",
"phone": "1-215-694-7661",
"email": "Fusce@lacusNullatincidunt.edu",
"dob": "01/04/1985"
},
{
"name": "Roanna Serrano",
"phone": "855-8131",
"email": "convallis.erat.eget@ipsumnuncid.com",
"dob": "03/07/1991"
},
{
"name": "Velma I. Cobb",
"phone": "1-979-311-2517",
"email": "aliquam.adipiscing@velarcueu.co.uk",
"dob": "11/11/1967"
},
{
"name": "Amery G. Ayala",
"phone": "509-2912",
"email": "molestie.pharetra@egestasDuis.edu",
"dob": "25/02/1976"
},
{
"name": "Josiah E. Rios",
"phone": "1-221-800-5552",
"email": "Duis.cursus@ipsumdolor.co.uk",
"dob": "20/08/1973"
},
{
"name": "Malachi Q. Tran",
"phone": "193-9929",
"email": "ante.ipsum.primis@atpretium.org",
"dob": "02/10/1987"
},
{
"name": "Erica Perez",
"phone": "1-381-238-7988",
"email": "mus.Proin@inlobortis.co.uk",
"dob": "21/08/1980"
},
{
"name": "Quinn A. Spence",
"phone": "1-465-928-7340",
"email": "enim.nec.tempus@orci.co.uk",
"dob": "07/01/1992"
},
{
"name": "Jolene Delacruz",
"phone": "1-285-575-9532",
"email": "bibendum.sed.est@nec.com",
"dob": "10/08/1990"
},
{
"name": "Rigel Cross",
"phone": "1-564-651-5621",
"email": "Vivamus.non.lorem@dignissimlacusAliquam.com",
"dob": "04/04/1969"
},
{
"name": "Jane Carney",
"phone": "658-6123",
"email": "bibendum@eleifendnunc.co.uk",
"dob": "29/10/1971"
},
{
"name": "Chancellor B. Cobb",
"phone": "1-127-360-1239",
"email": "ipsum.non@sem.org",
"dob": "25/09/1969"
},
{
"name": "Desirae Montoya",
"phone": "1-859-784-3087",
"email": "consectetuer.adipiscing@lobortismauris.co.uk",
"dob": "28/08/1991"
},
{
"name": "Rahim P. Whitfield",
"phone": "1-926-984-1942",
"email": "venenatis.lacus.Etiam@duinectempus.net",
"dob": "15/06/1978"
},
{
"name": "Brendan Willis",
"phone": "1-208-214-2665",
"email": "varius.orci.in@venenatis.org",
"dob": "31/10/1987"
},
{
"name": "Brady George",
"phone": "1-855-381-7483",
"email": "mi.enim.condimentum@Proinsedturpis.org",
"dob": "19/06/1969"
},
{
"name": "Austin Clark",
"phone": "449-1124",
"email": "a@purus.ca",
"dob": "24/10/1999"
}
]
App.js
import React from 'react';
import DataTable from 'react-data-table-component';
import data from './data.json';
const columns = [
{
name: 'Name',
selector: 'name',
sortable: true,
},
{
name: 'Phone',
selector: 'phone',
sortable: true,
},
{
name: 'Email',
selector: 'email',
sortable: true,
},
{
name: 'DOB',
selector: 'dob',
},
];
function App() {
return (
<div class="App">
<datatable title="Employees" columns={columns} data={data} pagination="" highlightonhover="">
</datatable></div>
);
}
export default App;
4. Output
Run the project and check it in the browser.
Output - How to implement DataTable in React - Clue Mediator
That’s it for today.
Thank you for reading. Happy Coding..!!
