How To Create Data Table With Filter Using Primereact/Primefaces In ReactJS

Introduction

PRIMEREACT UI framework that has Over 80 React UI Components with top-notch quality to help you implement all your UI requirements in style.

Data Table Filter, Filtering feature provides advanced and flexible options to query the data.

Preconditions

Javascript
Basic knowledge of React js
Node.js
V.S. Code,Visual Studio

We cover the below things,

Create React application
Installation of Primeface
How to Apply datatable with filters of Primeface in React js

Step 1

npx create-react-app prime-app
cd prime-app
npm start

Step 2

Run the below command for installing PrimeReact

npm install primereact primeicons

Create the files according to the below image

Step 3

Add the below code in the App.js

import React, { useState, useEffect } from 'react';
import { classNames } from 'primereact/utils';
import { FilterMatchMode, FilterOperator } from 'primereact/api';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { InputText } from 'primereact/inputtext';
import { Dropdown } from 'primereact/dropdown';
import { InputNumber } from 'primereact/inputnumber';
import { Button } from 'primereact/button';
import { ProgressBar } from 'primereact/progressbar';
import { Calendar } from 'primereact/calendar';
import { MultiSelect } from 'primereact/multiselect';
import { Slider } from 'primereact/slider';
import { TriStateCheckbox } from 'primereact/tristatecheckbox';
import { CustomerService } from './CustomerService';
import './DataTableDemo.css';
import 'primeicons/primeicons.css';
import 'primereact/resources/themes/lara-light-indigo/theme.css';
import 'primereact/resources/primereact.css';

function App() {
    const [customers1, setCustomers1] = useState(null);
    const [customers2, setCustomers2] = useState(null);
    const [filters1, setFilters1] = useState(null);
    const [filters2, setFilters2] = useState(null);
    const [globalFilterValue1, setGlobalFilterValue1] = useState('');
    const [globalFilterValue2, setGlobalFilterValue2] = useState('');
    const [loading1, setLoading1] = useState(true);
    const [loading2, setLoading2] = useState(true);
    const representatives = [
        { name: "Amy Elsner", image: 'amyelsner.png' },
        { name: "Anna Fali", image: 'annafali.png' },
        { name: "Asiya Javayant", image: 'asiyajavayant.png' },
        { name: "Bernardo Dominic", image: 'bernardodominic.png' },
        { name: "Elwin Sharvill", image: 'elwinsharvill.png' },
        { name: "Ioni Bowcher", image: 'ionibowcher.png' },
        { name: "Ivan Magalhaes", image: 'ivanmagalhaes.png' },
        { name: "Onyama Limba", image: 'onyamalimba.png' },
        { name: "Stephen Shaw", image: 'stephenshaw.png' },
        { name: "XuXue Feng", image: 'xuxuefeng.png' }
    ];

    const statuses = [
        'unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'
    ];

    const customerService = new CustomerService();

    useEffect(() => {

        debugger
        let data1 = customerService.getCustomersLarge();
        setCustomers1(getCustomers(data1)); setLoading1(false);
        initFilters2();

        debugger
        let data2 = customerService.getCustomersLarge();
        setCustomers2(getCustomers(data2)); setLoading2(false)
        initFilters1();
    }, []); // eslint-disable-line react-hooks/exhaustive-deps


    const getCustomers = (data2) => {
        debugger
        return [...data2 || []].map(d => {
            d.date = new Date(d.date);
            return d;
        });
    }
    const formatDate = (value) => {
        return value.toLocaleDateString('en-US', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
        });
    }
    const formatCurrency = (value) => {
        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
    }
    const clearFilter1 = () => {
        initFilters1();
    }
    const clearFilter2 = () => {
        initFilters2();
    }
    const onGlobalFilterChange1 = (e) => {
        const value = e.target.value;
        let _filters1 = { ...filters1 };
        _filters1['global'].value = value;

        setFilters1(_filters1);
        setGlobalFilterValue1(value);
    }

    const onGlobalFilterChange2 = (e) => {
        debugger
        const value = e.target.value;
        let _filters2 = { ...filters2 };
        _filters2['global'].value = value;

        setFilters2(_filters2);
        setGlobalFilterValue2(value);
    }

    const initFilters1 = () => {
        setFilters1({
            'global': { value: null, matchMode: FilterMatchMode.CONTAINS },
            'name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
            'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
            'representative': { value: null, matchMode: FilterMatchMode.IN },
            'date': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
            'balance': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
            'status': { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
            'activity': { value: null, matchMode: FilterMatchMode.BETWEEN },
            'verified': { value: null, matchMode: FilterMatchMode.EQUALS }
        });
        setGlobalFilterValue1('');
    }
    const initFilters2 = () => {
        setFilters2({
            'global': { value: null, matchMode: FilterMatchMode.CONTAINS },
            'name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
            'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
            'representative': { value: null, matchMode: FilterMatchMode.IN },
            'status': { value: null, matchMode: FilterMatchMode.EQUALS },
            'verified': { value: null, matchMode: FilterMatchMode.EQUALS }
        });
        setGlobalFilterValue2('');
    }

    const renderHeader1 = () => {
        return (
            <div className="flex justify-content-between">
                <Button type="button" icon="pi pi-filter-slash" label="Clear" className="p-button-outlined" onClick={clearFilter1} />
                <span className="p-input-icon-left">
                    <i className="pi pi-search" />
                    <InputText value={globalFilterValue1} onChange={onGlobalFilterChange1} placeholder="Keyword Search" />
                </span>
            </div>
        )
    }

    const renderHeader2 = () => {
        return (
            <div className="flex justify-content-end">
                <span className="p-input-icon-left">
                    <i className="pi pi-search" onClick={clearFilter2} />
                    <InputText value={globalFilterValue2} onChange={onGlobalFilterChange2} placeholder="Keyword Search" />
                </span>
            </div>
        )
    }

    const countryBodyTemplate = (rowData) => {
        return (
            <React.Fragment>
                <img alt="flag" src="/images/flag/flag_placeholder.png" onError={(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} className={`flag flag-${rowData.country.code}`} width={30} />
                <span className="image-text">{rowData.country.name}</span>
            </React.Fragment>
        );
    }

    const filterClearTemplate = (options) => {
        return <Button type="button" icon="pi pi-times" onClick={options.filterClearCallback} className="p-button-secondary"></Button>;
    }

    const filterApplyTemplate = (options) => {
        return <Button type="button" icon="pi pi-check" onClick={options.filterApplyCallback} className="p-button-success"></Button>
    }
    const filterFooterTemplate = () => {
        return <div className="px-3 pt-0 pb-3 text-center font-bold">Customized Buttons</div>;
    }
    const representativeBodyTemplate = (rowData) => {
        const representative = rowData.representative;
        return (
            <React.Fragment>
                <img alt={representative.name} src={`https://www.primefaces.org/primereact/images/avatar/${representative.image}`} onError={(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width={32} style={{ verticalAlign: 'middle' }} />
                <span className="image-text">{representative.name}</span>
            </React.Fragment>
        );
    }
    const representativeFilterTemplate = (options) => {
        return <MultiSelect value={options.value} options={representatives} itemTemplate={representativesItemTemplate} onChange={(e) => options.filterCallback(e.value)} optionLabel="name" placeholder="Any" className="p-column-filter" />;
    }
    const representativesItemTemplate = (option) => {
        return (
            <div className="p-multiselect-representative-option">
                <img alt={option.name} src={`https://www.primefaces.org/primereact/images/avatar/${option.image}`} onError={(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width={32} style={{ verticalAlign: 'middle' }} />
                <span className="image-text">{option.name}</span>
            </div>
        );
    }
    const dateBodyTemplate = (rowData) => {
        return formatDate(rowData.date);
    }
    const dateFilterTemplate = (options) => {
        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />
    }
    const balanceBodyTemplate = (rowData) => {
        return formatCurrency(rowData.balance);
    }
    const balanceFilterTemplate = (options) => {
        return <InputNumber value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} mode="currency" currency="USD" locale="en-US" />
    }
    const statusBodyTemplate = (rowData) => {
        return <span className={`customer-badge status-${rowData.status}`}>{rowData.status}</span>;
    }
    const statusFilterTemplate = (options) => {
        return <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select a Status" className="p-column-filter" showClear />;
    }
    const statusItemTemplate = (option) => {
        return <span className={`customer-badge status-${option}`}>{option}</span>;
    }
    const activityBodyTemplate = (rowData) => {
        return <ProgressBar value={rowData.activity} showValue={false}></ProgressBar>;
    }
    const activityFilterTemplate = (options) => {
        return (
            <React.Fragment>
                <Slider value={options.value} onChange={(e) => options.filterCallback(e.value)} range className="m-3"></Slider>
                <div className="flex align-items-center justify-content-between px-2">
                    <span>{options.value ? options.value[0] : 0}</span>
                    <span>{options.value ? options.value[1] : 100}</span>
                </div>
            </React.Fragment>
        )
    }
    const verifiedBodyTemplate = (rowData) => {
        return <i className={classNames('pi', { 'true-icon pi-check-circle': rowData.verified, 'false-icon pi-times-circle': !rowData.verified })}></i>;
    }
    const verifiedFilterTemplate = (options) => {
        return <TriStateCheckbox value={options.value} onChange={(e) => options.filterCallback(e.value)} />
    }
    const representativeRowFilterTemplate = (options) => {
        return <MultiSelect value={options.value} options={representatives} itemTemplate={representativesItemTemplate} onChange={(e) => options.filterApplyCallback(e.value)} optionLabel="name" placeholder="Any" className="p-column-filter" maxSelectedLabels={1} />;
    }

    const statusRowFilterTemplate = (options) => {
        return <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterApplyCallback(e.value)} itemTemplate={statusItemTemplate} placeholder="Select a Status" className="p-column-filter" showClear />;
    }

    const verifiedRowFilterTemplate = (options) => {
        return <TriStateCheckbox value={options.value} onChange={(e) => options.filterApplyCallback(e.value)} />
    }

    const header1 = renderHeader1();
    const header2 = renderHeader2();

    return (
        <div className="datatable-filter-demo">
            <div className="card">
                <h5>Filter Menu</h5>
                <p>Filters are displayed in an overlay.</p>
                <DataTable value={customers1} paginator className="p-datatable-customers" showGridlines rows={10}
                    dataKey="id" filters={filters1} filterDisplay="menu" loading={loading1} responsiveLayout="scroll"
                    globalFilterFields={['name', 'country.name', 'representative.name', 'balance', 'status']} header={header1} emptyMessage="No customers found.">

                    <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
                    <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country"
                        filterClear={filterClearTemplate} filterApply={filterApplyTemplate} filterFooter={filterFooterTemplate} />
                    <Column header="Agent" filterField="representative" showFilterMatchModes={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '14rem' }} body={representativeBodyTemplate}
                        filter filterElement={representativeFilterTemplate} />
                    <Column header="Date" filterField="date" dataType="date" style={{ minWidth: '10rem' }} body={dateBodyTemplate}
                        filter filterElement={dateFilterTemplate} />
                    <Column header="Balance" filterField="balance" dataType="numeric" style={{ minWidth: '10rem' }} body={balanceBodyTemplate} filter filterElement={balanceFilterTemplate} />
                    <Column field="status" header="Status" filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusFilterTemplate} />
                    <Column field="activity" header="Activity" showFilterMatchModes={false} style={{ minWidth: '12rem' }} body={activityBodyTemplate} filter filterElement={activityFilterTemplate} />
                    <Column field="verified" header="Verified" dataType="boolean" bodyClassName="text-center" style={{ minWidth: '8rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedFilterTemplate} />
                </DataTable>
            </div>

            <div className="card">
                <h5>Filter Row</h5>
                <p>Filters are displayed inline within a separate row.</p>
                <DataTable value={customers2} paginator className="p-datatable-customers" rows={10}
                    dataKey="id" filters={filters2} filterDisplay="row" loading={loading2} responsiveLayout="scroll"
                    globalFilterFields={['name', 'country.name', 'representative.name', 'status']} header={header2} emptyMessage="No customers found.">
                    <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
                    <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
                    <Column header="Agent" filterField="representative" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '14rem' }} body={representativeBodyTemplate}
                        filter filterElement={representativeRowFilterTemplate} />
                    <Column field="status" header="Status" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusRowFilterTemplate} />
                    <Column field="verified" header="Verified" dataType="boolean" style={{ minWidth: '6rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedRowFilterTemplate} />
                </DataTable>
            </div>
        </div>
    );
}
export default App;

Step 4

Add the below code in index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!-- PrimeReact -->
     <link rel="stylesheet" href="https://unpkg.com/primeicons/primeicons.css" />
     <link rel="stylesheet" href="https://unpkg.com/primereact/resources/themes/lara-light-indigo/theme.css" />
     <link rel="stylesheet" href="https://unpkg.com/primereact/resources/primereact.min.css" />
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/primeflex.min.css" />

     <!-- Dependencies -->
     <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
     <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/react-transition-group.js"></script>

     <!-- Demo -->
     <script src="https://unpkg.com/primereact/core/core.min.js"></script>
     <script src="https://unpkg.com/primereact/slidemenu/slidemenu.min.js"></script>
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/primeicons.css">

    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

    <script src="https://unpkg.com/primereact/core/core.min.js"></script>
    <script src="https://unpkg.com/primereact/slidemenu/slidemenu.min.js"></script>

    <title>React App</title>
  </head>
  <body>
    
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Step 5

Add the below code in App.css

.App {
    text - align: center;
}.App - logo {
    height: 40 vmin;
    pointer - events: none;
}
@media(prefers - reduced - motion: no - preference) {
    .App - logo {
        animation: App - logo - spin infinite 20 s linear;
    }
}.App - header {
    background - color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: # 61 dafb;
}
@keyframes App - logo - spin {
        from {
            transform: rotate(0 deg);
        }
        to {
            transform: rotate(360 deg);
        }
    }.flag {
        background: url(https: //www.primefaces.org/primereact/images/flag/flags_responsive.png) no-repeat;
                background - size: 100 % ; vertical - align: middle;
            }.datatable - filter - demo.p - paginator.p - paginator - current {
                margin - left: auto;
            }.datatable - filter - demo.p - progressbar {
                height: 0.5 rem;
                background - color: #d8dadc;
            }.datatable - filter - demo.p - progressbar.p - progressbar - value {
                background - color: #607d8b;
}
.datatable-filter-demo .p-datepicker {
  min-width: 25rem;
}
.datatable-filter-demo .p-datepicker td {
  font-weight: 400;
}
.datatable-filter-demo .p-datatable.p-datatable-customers .p-datatable-header {
  padding: 1rem;
  text-align: left;
  font-size: 1.5rem;
}
.datatable-filter-demo .p-datatable.p-datatable-customers .p-paginator {
  padding: 1rem;
}
.datatable-filter-demo .p-datatable.p-datatable-customers .p-datatable-thead > tr > th {
  text-align: left;
}
.datatable-filter-demo .p-datatable.p-datatable-customers .p-datatable-tbody > tr > td {
  cursor: auto;
}
.datatable-filter-demo .p-datatable.p-datatable-customers .p-dropdown-label:not(.p-placeholder) {
  text-transform: uppercase;
}

Step 6

Add the following code in package.json

{
    "name": "prime-demo",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.16.4",
        "@testing-library/react": "^13.3.0",
        "@testing-library/user-event": "^13.5.0",
        "primeicons": "^5.0.0",
        "primereact": "^8.1.1",
        "react": "^18.1.0",
        "react-dom": "^18.1.0",
        "react-redux": "^8.0.2",
        "react-scripts": "^2.1.3",
        "redux": "^4.2.0",
        "web-vitals": "^2.1.4",
        "primeflex": "^3.1.0",
        "react-transition-group": "^4.4.1"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": ["react-app", "react-app/jest"]
    },
    "browserslist": {
        "production": [">0.2%", "not dead", "not op_mini all"],
        "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
    }
}

Step 7

Add below code in Customer-Large.json

[{
    "id": 1000,
    "name": "James Butt",
    "country": {
        "name": "Algeria",
        "code": "dz"
    },
    "company": "Benton, John B Jr",
    "date": "2015-09-13",
    "status": "unqualified",
    "verified": true,
    "activity": 17,
    "representative": {
        "name": "Ioni Bowcher",
        "image": "ionibowcher.png"
    },
    "balance": 70663
}, {
    "id": 1001,
    "name": "Josephine Darakjy",
    "country": {
        "name": "Egypt",
        "code": "eg"
    },
    "company": "Chanay, Jeffrey A Esq",
    "date": "2019-02-09",
    "status": "proposal",
    "verified": true,
    "activity": 0,
    "representative": {
        "name": "Amy Elsner",
        "image": "amyelsner.png"
    },
    "balance": 82429
}, {
    "id": 1002,
    "name": "Art Venere",
    "country": {
        "name": "Panama",
        "code": "pa"
    },
    "company": "Chemel, James L Cpa",
    "date": "2017-05-13",
    "status": "qualified",
    "verified": false,
    "activity": 63,
    "representative": {
        "name": "Asiya Javayant",
        "image": "asiyajavayant.png"
    },
    "balance": 28334
}, {
    "id": 1003,
    "name": "Lenna Paprocki",
    "country": {
        "name": "Slovenia",
        "code": "si"
    },
    "company": "Feltz Printing Service",
    "date": "2020-09-15",
    "status": "new",
    "verified": false,
    "activity": 37,
    "representative": {
        "name": "Xuxue Feng",
        "image": "xuxuefeng.png"
    },
    "balance": 88521
}, {
    "id": 1004,
    "name": "Donette Foller",
    "country": {
        "name": "South Africa",
        "code": "za"
    },
    "company": "Printing Dimensions",
    "date": "2016-05-20",
    "status": "proposal",
    "verified": true,
    "activity": 33,
    "representative": {
        "name": "Asiya Javayant",
        "image": "asiyajavayant.png"
    },
    "balance": 93905
}, {
    "id": 1005,
    "name": "Simona Morasca",
    "country": {
        "name": "Egypt",
        "code": "eg"
    },
    "company": "Chapman, Ross E Esq",
    "date": "2018-02-16",
    "status": "qualified",
    "verified": false,
    "activity": 68,
    "representative": {
        "name": "Ivan Magalhaes",
        "image": "ivanmagalhaes.png"
    },
    "balance": 50041
}, {
    "id": 1006,
    "name": "Mitsue Tollner",
    "country": {
        "name": "Paraguay",
        "code": "py"
    },
    "company": "Morlong Associates",
    "date": "2018-02-19",
    "status": "renewal",
    "verified": true,
    "activity": 54,
    "representative": {
        "name": "Ivan Magalhaes",
        "image": "ivanmagalhaes.png"
    },
    "balance": 58706
}, {
    "id": 1007,
    "name": "Leota Dilliard",
    "country": {
        "name": "Serbia",
        "code": "rs"
    },
    "company": "Commercial Press",
    "date": "2019-08-13",
    "status": "renewal",
    "verified": true,
    "activity": 69,
    "representative": {
        "name": "Onyama Limba",
        "image": "onyamalimba.png"
    },
    "balance": 26640
}, {
    "id": 1008,
    "name": "Sage Wieser",
    "country": {
        "name": "Egypt",
        "code": "eg"
    },
    "company": "Truhlar And Truhlar Attys",
    "date": "2018-11-21",
    "status": "unqualified",
    "verified": true,
    "activity": 76,
    "representative": {
        "name": "Ivan Magalhaes",
        "image": "ivanmagalhaes.png"
    },
    "balance": 65369
}, {
    "id": 1009,
    "name": "Kris Marrier",
    "country": {
        "name": "Mexico",
        "code": "mx"
    },
    "company": "King, Christopher A Esq",
    "date": "2015-07-07",
    "status": "proposal",
    "verified": false,
    "activity": 3,
    "representative": {
        "name": "Onyama Limba",
        "image": "onyamalimba.png"
    },
    "balance": 63451
}, {
    "id": 1010,
    "name": "Minna Amigon",
    "country": {
        "name": "Romania",
        "code": "ro"
    },
    "company": "Dorl, James J Esq",
    "date": "2018-11-07",
    "status": "qualified",
    "verified": false,
    "activity": 38,
    "representative": {
        "name": "Anna Fali",
        "image": "annafali.png"
    },
    "balance": 71169
}, {
    "id": 1011,
    "name": "Abel Maclead",
    "country": {
        "name": "Singapore",
        "code": "sg"
    },
    "company": "Rangoni Of Florence",
    "date": "2017-03-11",
    "status": "qualified",
    "verified": true,
    "activity": 87,
    "representative": {
        "name": "Bernardo Dominic",
        "image": "bernardodominic.png"
    },
    "balance": 96842
}, {
    "id": 1012,
    "name": "Kiley Caldarera",
    "country": {
        "name": "Serbia",
        "code": "rs"
    },
    "company": "Feiner Bros",
    "date": "2015-10-20",
    "status": "unqualified",
    "verified": false,
    "activity": 80,
    "representative": {
        "name": "Onyama Limba",
        "image": "onyamalimba.png"
    },
    "balance": 92734
}, {
    "id": 1013,
    "name": "Graciela Ruta",
    "country": {
        "name": "Chile",
        "code": "cl"
    },
    "company": "Buckley Miller & Wright",
    "date": "2016-07-25",
    "status": "negotiation",
    "verified": false,
    "activity": 59,
    "representative": {
        "name": "Amy Elsner",
        "image": "amyelsner.png"
    },
    "balance": 45250
}]

Step 8

Add below code in CustomerService.js

import data from './Customer-large.json';
export class CustomerService {
    getCustomersSmall() {
        const result = [];
        data.map((datas) => {
            result.push(datas)
        });
        return result;
        // return fetch('data/customers-small.json').then(res => res.json())
        //         .then(d => d.data);
    }
    getCustomersMedium() {
        return fetch('data/customers-medium.json').then(res => res.json()).then(d => d.data);
    }
    // getCustomersLarge() {
    //     return fetch('data/customers-large.json').then(res => res.json())
    //             .then(d => d.data);
    // }
    getCustomersLarge() {
        const result = [];
        data.map((datas) => {
            result.push(datas)
        });
        return result;
        // return fetch('data/customers-large.json').then(res => res.json())
        //         .then(d => d.data);
    }
    getCustomersXLarge() {
        return fetch('data/customers-xlarge.json').then(res => res.json()).then(d => d.data);
    }
    getCustomers(params) {
        debugger
        const queryParams = params ? Object.keys(params).map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])).join('&') : '';
        debugger
        return fetch('https://www.primefaces.org/data/customers?' + queryParams).then(res => res.json())
    }
}

Step 9

Run the following command

npm i 
npm start

Step 10

How to create Data Table with Filter using PrimeReact

Summary

In this article, we learned how to create react project, set PrimeReact UI, add datatable and apply pagination and filters.