DEV Community

Arvind Kumar
Arvind Kumar

Posted on

React Table Server Side Pagination with Sorting and Search Filters

After following a post on dev.to I was able to setup a basic server side paginated table. However since the post did not have the sorting and search features I had to extend it and hence this one!

Here is what my final table looks like:

Image description

Let's start with some initial imports. My example uses react-query so make sure you have it installed. It is a great library anyway. I also use axios library for making ajax calls.



import React, {useState, useEffect, useMemo} from "react"
import { useTable, usePagination, useSortBy } from "react-table"
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
import axios from 'axios'


Enter fullscreen mode Exit fullscreen mode

Next I import user columns which I place in another file named columns.jsx



import { USERS_COLUMNS } from "./columns"


Enter fullscreen mode Exit fullscreen mode

And here are the contents of columns.jsx file:



export const USERS_COLUMNS = [
    {
        Header: "Email",
        accessor: "email",
    },
    {
        Header: "Name",
        accessor: "name",
    },
    {
        Header: "Phone",
        accessor: "phone",
    },
    {
        Header: "Role",
        accessor: "role",
    },
    {
        Header: "Employee Number",
        accessor: "employee_number"
    },
]


Enter fullscreen mode Exit fullscreen mode

Next imports are:



import SortIcon from 'mdi-react/SortIcon'
import SortAscendingIcon from 'mdi-react/SortAscendingIcon'
import SortDescendingIcon from 'mdi-react/SortDescendingIcon'
import ReactTablePagination from '@/shared/components/table/components/ReactTablePagination'
import UsersFilter  from "./UsersFilter"


Enter fullscreen mode Exit fullscreen mode

Let me explain it a bit. First three imports are icons used for sorting. Next to it is ReactTablePagination component I have created for pagination links and last one UsersFilter is the search area where I place search box with a submit link. I may also want to add more filters later on.

I will post ReactTablePagination and UsersFilter code down the page. Let's first work with our current UsersIndex.jsx file and its main component DataTable but before that let me post some declarations I have made outside of DataTable component.

Okay, once all the imports are done at the top of this page. Let start with structure of rest of this file.

Since I am using react-query, and you should also consider using it if your app is doing ajax requests for data extensively, I will wrap my DataTable component within QueryClientProvider which is exported from react-query library if you noticed it at the top of the page.

So after imports I initialise the queryClient



const queryClient = new QueryClient()


Enter fullscreen mode Exit fullscreen mode

... and wrap my DataTable with QueryClientProvider by passing client to it and export it at the end of the page. You may also consider to wrap you main within this client, I have just added it in my this one page only.

This is the overall structure of UsersIndex.jsx file




... imports at the top of the file

const queryClient = new QueryClient()

... other file code

const DataTable = () => {
   ... component code
}

const TableWrapper = () => {
    return (
        <QueryClientProvider client={queryClient}>
            <DataTable />
        </QueryClientProvider>
    )
}

export default TableWrapper;


Enter fullscreen mode Exit fullscreen mode

Lets dive into the ...other file code first. This is the code which is before the main DataTable component.



const initialState = {
    queryPageIndex: 0,
    queryPageSize: 10,
    totalCount: 0,
    queryPageFilter:"",
    queryPageSortBy: [],
};

const PAGE_CHANGED = 'PAGE_CHANGED'
const PAGE_SIZE_CHANGED = 'PAGE_SIZE_CHANGED'
const PAGE_SORT_CHANGED = 'PAGE_SORT_CHANGED'
const PAGE_FILTER_CHANGED = 'PAGE_FILTER_CHANGED'
const TOTAL_COUNT_CHANGED = 'TOTAL_COUNT_CHANGED'

const reducer = (state, { type, payload }) => {
  switch (type) {
    case PAGE_CHANGED:
        return {
            ...state,
            queryPageIndex: payload,
        };
    case PAGE_SIZE_CHANGED:
        return {
            ...state,
            queryPageSize: payload,
        };
    case PAGE_SORT_CHANGED:
        return {
            ...state,
            queryPageSortBy: payload,
        };
    case PAGE_FILTER_CHANGED:
        return {
            ...state,
            queryPageFilter: payload,
        };
    case TOTAL_COUNT_CHANGED:
        return {
            ...state,
            totalCount: payload,
        };
    default:
      throw new Error(`Unhandled action type: ${type}`)
  }
};

const fetchUsersData = async (page, pageSize, pageFilter, pageSortBy) => {
    let paramStr = ''
    if( pageFilter.trim().length > 1 ) {
        paramStr = `&keyword=${pageFilter}`
    }
    if( pageSortBy.length > 0 ) {
        const sortParams = pageSortBy[0];
        const sortyByDir = sortParams.desc ? 'desc' : 'asc'
        paramStr = `${paramStr}&sortby=${sortParams.id}&direction=${sortyByDir}`
    }
    try {
        const response = await axios.get(
        `/users?page=${page+1}&limit=${pageSize}${paramStr}`
        );
        const results = response.data.data;
        const data = {
            results: results,
            count: response.data.total
        };
        return data;
    } catch (e) {
        throw new Error(`API error:${e?.message}`)
    }
}


Enter fullscreen mode Exit fullscreen mode

New thing to notice in the code above is the use of reducer. If you are not sure how reducers work you should check this post or a simplified post here

Also there is fetchUsersData function which is responsible for fetching user data and most of it is self-explaining.

And finally here is the DataTable component



const DataTable = () => {
    const [keyword, setKeyword] = useState('');
    const [useFilter, setUseFilter] = useState(false);
    const onClickFilterCallback = ( filter ) => {
        if(filter.trim() === "") {
            alert('Please enter a keyword to search!')
            return
        }
        if(filter === keyword)   {
            alert('No change in search')
            return
        }
        setUseFilter(true)
        setKeyword(filter)
    }

    let columns = useMemo( () => USERS_COLUMNS, [])

    const [{ queryPageIndex, queryPageSize, totalCount, queryPageFilter, queryPageSortBy }, dispatch] =
    useReducer(reducer, initialState);

    const { isLoading, error, data, isSuccess } = useQuery(
        ['users', queryPageIndex, queryPageSize, queryPageFilter, queryPageSortBy],
        () => fetchUsersData(queryPageIndex, queryPageSize, queryPageFilter, queryPageSortBy),
        {
            keepPreviousData: false,
            staleTime: Infinity,
        }
    );

    const totalPageCount = Math.ceil(totalCount / queryPageSize)

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
        page,
        pageCount,
        pageOptions,
        gotoPage,
        previousPage,
        canPreviousPage,
        nextPage,
        canNextPage,
        setPageSize,
        state: { pageIndex, pageSize, sortBy }
    } = useTable({
        columns,
        data: data?.results || [],
        initialState: {
            pageIndex: queryPageIndex,
            pageSize: queryPageSize,
            sortBy: queryPageSortBy,
        },
        manualPagination: true,
        pageCount: data ? totalPageCount : null,
        autoResetSortBy: false,
        autoResetExpanded: false,
        autoResetPage: false
    },
    useSortBy,
    usePagination,
    );
    const manualPageSize = []

    useEffect(() => {
        dispatch({ type: PAGE_CHANGED, payload: pageIndex });
    }, [pageIndex]);

    useEffect(() => {
        dispatch({ type: PAGE_SIZE_CHANGED, payload: pageSize });
        gotoPage(0);
    }, [pageSize, gotoPage]);

    useEffect(() => {
        dispatch({ type: PAGE_SORT_CHANGED, payload: sortBy });
        gotoPage(0);
    }, [sortBy, gotoPage]);

    useEffect(() => {
        if ( useFilter ) {
            dispatch({ type: PAGE_FILTER_CHANGED, payload: keyword });
            gotoPage(0);
        }
    }, [keyword, gotoPage, useFilter]);

    useEffect(() => {
        if (data?.count) {
            dispatch({
            type: TOTAL_COUNT_CHANGED,
            payload: data.count,
            });
        }
    }, [data?.count]);

    if (error) {
        return <p>Error</p>;
    }

    if (isLoading) {
        return <p>Loading...</p>;
    }
    if(isSuccess)
    return (
            <>
                <div className='table react-table'>
                    <form className="form form--horizontal">
                        <div className="form__form-group">
                            <div className="col-md-9 col-lg-9">
                                <UsersFilter onClickFilterCallback={onClickFilterCallback} defaultKeyword={keyword} />
                            </div>
                            <div className="col-md-3 col-lg-3 text-right pr-0">
                                <Link style={{maxWidth:'200px'}}
                                className="btn btn-primary account__btn account__btn--small"
                                to="/users/add"
                                >Add new user
                                </Link>
                            </div>
                        </div>
                    </form>
                    {
                        typeof data?.count === 'undefined' && <p>No results found</p>
                    }
                    {data?.count && 
                    <>
                    <table {...getTableProps()} className="table">
                        <thead>
                            {headerGroups.map( (headerGroup) => (
                                <tr {...headerGroup.getHeaderGroupProps()}>
                                    {headerGroup.headers.map( column => (
                                        <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                                            {column.render('Header')}
                                            {column.isSorted ? <Sorting column={column} /> : ''}
                                        </th>
                                    ))}
                                </tr>
                            ))}
                        </thead>
                        <tbody className="table table--bordered" {...getTableBodyProps()}>
                            {page.map( row => {
                                prepareRow(row);
                                return (
                                    <tr {...row.getRowProps()}>
                                        {
                                            row.cells.map( cell => {
                                                return <td {...cell.getCellProps()}><span>{cell.render('Cell')}</span></td>
                                            })
                                        }
                                    </tr>
                                )
                            })}
                        </tbody>
                    </table>
                    </>
                }
                </div>
                {(rows.length > 0) && (
                    <>
                        <ReactTablePagination
                            page={page}
                            gotoPage={gotoPage}
                            previousPage={previousPage}
                            nextPage={nextPage}
                            canPreviousPage={canPreviousPage}
                            canNextPage={canNextPage}
                            pageOptions={pageOptions}
                            pageSize={pageSize}
                            pageIndex={pageIndex}
                            pageCount={pageCount}
                            setPageSize={setPageSize}
                            manualPageSize={manualPageSize}
                            dataLength={totalCount}
                        />
                        <div className="pagination justify-content-end mt-2">
                            <span>
                            Go to page:{' '}
                            <input
                                type="number"
                                value={pageIndex + 1}
                                onChange={(e) => {
                                const page = e.target.value ? Number(e.target.value) - 1 : 0;
                                gotoPage(page);
                                }}
                                style={{ width: '100px' }}
                            />
                            </span>{' '}
                            <select
                            value={pageSize}
                            onChange={(e) => {
                                setPageSize(Number(e.target.value));
                            }}
                            >
                            {[10, 20, 30, 40, 50].map((pageSize) => (
                                <option key={pageSize} value={pageSize}>
                                Show {pageSize}
                                </option>
                            ))}
                            </select>
                        </div>
                    </>
                )}
            </>
    )
}


Enter fullscreen mode Exit fullscreen mode

And there is one helper component which is outside of DataTable component. I just placed it at the bottom, just before the TableWrapper.



const Sorting = ({ column }) => (
    <span className="react-table__column-header sortable">
      {column.isSortedDesc === undefined ? (
        <SortIcon />
      ) : (
        <span>
          {column.isSortedDesc
            ? <SortAscendingIcon />
            : <SortDescendingIcon />}
        </span>
      )}
    </span>
);


Enter fullscreen mode Exit fullscreen mode

It is not possible to explain every line and I hope the code makes sense to you. There is one thing I want to mention though. Notice the last three settings in the block:



manualPagination: true,
pageCount: data ? totalPageCount : null,
autoResetSortBy: false,
autoResetExpanded: false,
autoResetPage: false


Enter fullscreen mode Exit fullscreen mode

I had to set them in order to get rid of "Maximum update depth exceeded" error after I turned manualPagination on and implemented server side pagination with sorting and search in my reactjs application. (See ref here)

Top comments (4)

Collapse
 
koichadev profile image
Khoi Hoang

Thanks for making this article! Your github repo doesn't contain the whole React application, only partially of the React component based on your article. It's very hard to understand the context how it works.

Can you please create your demo on codesandbox.io and share it to us? It's much easier and faster to see a demo purpose online comapred to download the whole repo and installing the dependency and run on the local machine.

Collapse
 
inimist profile image
Arvind Kumar • Edited

Hi Sorry for late reply!

I wrote this article in the context of this article dev.to/elangobharathi/server-side-... and I mentioned it at the very beginning of the post. Please check the other articles for full code, I just extended it to add sorting and search filters so please check the base post to setup code for yourself and then extend with my code. Later sometime I will try to add full code base to github and create an example on codesandbox. Super busy with other work right now.

Collapse
 
nil12285 profile image
Neelay

Hi,
Do we really need to write this much code in React, for just a data table even with the plugin?

Collapse
 
kishan_rathod_bcc78f881ec profile image
Kishan Rathod • Edited

Hello @inimist

I used this example in my learning project and added status (Toggel button) on grid. so can you please tell me how I can update the table data when status changed. below is the my code

import React, { useState, useEffect, useMemo, useCallback } from "react";
import { useTable, usePagination, useSortBy } from "react-table"
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
import { Link } from 'react-router-dom'
import { Store } from 'react-notifications-component';

//import { USERS_COLUMNS } from "./StallionGrid/columns"
import { SortIcon } from '../../../../mdi-react/MdiReact';
import { SortAscendingIcon } from '../../../../mdi-react/MdiReact';
import { SortDescendingIcon } from '../../../../mdi-react/MdiReact';

import ReactTablePagination from './StallionGrid/ReactTablePagination'
import UsersFilter from "./StallionGrid/UsersFilter"

const queryClient = new QueryClient();
const initialState = {
    queryPageIndex: 0,
    queryPageSize: 10,
    totalCount: 0,
    queryPageFilter: "",
    queryPageSortBy: []
};
const PAGE_CHANGED = 'PAGE_CHANGED';
const PAGE_SIZE_CHANGED = 'PAGE_SIZE_CHANGED';
const PAGE_SORT_CHANGED = 'PAGE_SORT_CHANGED';
const PAGE_FILTER_CHANGED = 'PAGE_FILTER_CHANGED';
const TOTAL_COUNT_CHANGED = 'TOTAL_COUNT_CHANGED';
const PAGE_DATA_CHANGED = 'PAGE_DATA_CHANGED';


import Sidebar from '../Includes/Sidebar';
import { PUBLIC_URL } from "../../../constants";
import './StallionGrid/ToggleButton.css';

import { getUsersStallions, updateStalllionData, deleteStallionById } from '../../../services/Horse'


const reducer = (state, { type, payload }) => {
    switch (type) {
        case PAGE_CHANGED:
            return {
                ...state,
                queryPageIndex: payload,
            };
        case PAGE_SIZE_CHANGED:
            return {
                ...state,
                queryPageSize: payload,
            };
        case PAGE_SORT_CHANGED:
            return {
                ...state,
                queryPageSortBy: payload,
            };
        case PAGE_FILTER_CHANGED:
            return {
                ...state,
                queryPageFilter: payload,
            };
        case TOTAL_COUNT_CHANGED:
            return {
                ...state,
                totalCount: payload,
            };
        case PAGE_DATA_CHANGED:
            return {
                ...state,
                pageDataChanged: payload,
            };
        default:
            throw new Error(`Unhandled action type: ${type}`);
    }
};




const DataTable = (props) => {
    console.log(props)
    const [keyword, setKeyword] = useState('');
    const [useFilter, setUseFilter] = useState(false);

    const onClickFilterCallback = (filter) => {
        if (filter.trim() === "") {
            alert('Please enter a keyword to search!')
            return
        }
        if (filter === keyword) {
            alert('No change in search')
            return
        }
        setUseFilter(true)
        setKeyword(filter)
    }

    const fetchUsersData = useCallback(async (page, pageSize, pageFilter, pageSortBy) => {
        let paramStr = ''
        if (pageFilter.trim().length > 1) {
            paramStr = `&keyword=${pageFilter}`
        }
        if (pageSortBy.length > 0) {
            const sortParams = pageSortBy[0];
            const sortyByDir = sortParams.desc ? 'desc' : 'asc'
            paramStr = `${paramStr}&sortby=${sortParams.id}&direction=${sortyByDir}`
        }
        try {
            /* const response = await axios.get(
                 `/users?page=${page + 1}&limit=${pageSize}${paramStr}`
             );*/
            const response = await getUsersStallions(page + 1, pageSize, paramStr);
            const results = response.response.data.data;
            const data = {
                results: results,
                count: response.response.data.total
            };
            props.refreshPageData(!props.refreshPage)
            return data;
        } catch (e) {
            throw new Error(`API error:${e?.message}`);
        }
    },[props.refreshPage]);

    //update status of stallion
    const updateStallionStatus = async (id, status) => {
        const response = await updateStalllionData(id, { 'status': !status });
        if (response.success) {
            Store.addNotification({
                title: "Wonderful!",
                message: response.message,
                type: "success",
                insert: "top",
                container: "top-right",
                animationIn: ["animate__animated", "animate__fadeIn"],
                animationOut: ["animate__animated", "animate__fadeOut"],
                dismiss: {
                    duration: 5000,
                    onScreen: true
                }
            });
            console.log("updateStallionStatus: ", props.refreshPage)
            dispatch({ type: PAGE_DATA_CHANGED, payload: !props.refreshPage });
        }
    };

    const deleteStallion = async (id) => {
        if (window.confirm("Are you sure to delete this?")) {
            const response = await deleteStallionById(id);
            if (response.success) {
                Store.addNotification({
                    title: "Wonderful!",
                    message: response.message,
                    type: "success",
                    insert: "top",
                    container: "top-right",
                    animationIn: ["animate__animated", "animate__fadeIn"],
                    animationOut: ["animate__animated", "animate__fadeOut"],
                    dismiss: {
                        duration: 5000,
                        onScreen: true
                    }
                });
            }
        }
    }

    let columns = useMemo(() => {
        return [
            {
                Header: "Name",
                accessor: d => (
                    <div className="media">
                        <div className="media-left media-middle">
                            <img src={d.photo} alt={d.horseName} />
                        </div>
                        <div className="media-body media-middle">
                            <h5>
                                {d.horseName}
                            </h5>
                        </div>
                    </div>
                )
            },
            {
                Header: "Category",
                accessor: "breed"
            },
            {
                Header: "Color",
                accessor: "color"
            },
            {
                Header: "Status",
                //accessor: d => (d.status ? <strong className="green-txt">Active</strong> : <strong className="red-txt">Disabled</strong>)
                accessor: d => (<button onClick={() => updateStallionStatus(d.id, d.status)} className={`toggle-button ${d.status ? 'on' : 'off'}`} aria-label="Toggle button">
                    {d.status ? 'ON' : 'OFF'}
                </button>)
            },
            {
                Header: "Created At",
                accessor: "created_at"
            },
            {
                Header: "Action",
                accessor: d => (
                    <div>
                        <Link to={`${PUBLIC_URL}stallions/add/${d.id}`} className="theme_button">
                            <i className="fa fa-edit"></i>
                        </Link>
                        <button className="theme_button" onClick={() => deleteStallion(d.id)}>
                            <i className="fa fa-trash"></i>
                        </button>
                    </div>
                )
            }
        ]
    }, [])

    const [{ queryPageIndex, queryPageSize, totalCount, queryPageFilter, queryPageSortBy, pageDataChanged }, dispatch] =
        React.useReducer(reducer, initialState);

    const { isLoading, error, data, isSuccess } = useQuery(
        ['users', queryPageIndex, queryPageSize, queryPageFilter, queryPageSortBy, pageDataChanged],
        () => fetchUsersData(queryPageIndex, queryPageSize, queryPageFilter, queryPageSortBy),
        {
            keepPreviousData: false,
            //staleTime: Infinity,
        }
    );

    const totalPageCount = Math.ceil(totalCount / queryPageSize)

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
        page,
        pageCount,
        pageOptions,
        gotoPage,
        previousPage,
        canPreviousPage,
        nextPage,
        canNextPage,
        setPageSize,
        state: { pageIndex, pageSize, sortBy }
    } = useTable({
        columns,
        data: data?.results || [],
        initialState: {
            pageIndex: queryPageIndex,
            pageSize: queryPageSize,
            sortBy: queryPageSortBy,
        },
        manualPagination: true,
        pageCount: data ? totalPageCount : null,
        autoResetSortBy: false,
        autoResetExpanded: false,
        autoResetPage: false
    },
        useSortBy,
        usePagination,
    );
    const manualPageSize = []

    useEffect(() => {
        dispatch({ type: PAGE_CHANGED, payload: pageIndex });
    }, [pageIndex]);

    useEffect(() => {
        dispatch({ type: PAGE_SIZE_CHANGED, payload: pageSize });
        gotoPage(0);
    }, [pageSize, gotoPage]);

    useEffect(() => {
        dispatch({ type: PAGE_SORT_CHANGED, payload: sortBy });
        gotoPage(0);
    }, [sortBy, gotoPage]);

    useEffect(() => {
        if (useFilter) {
            dispatch({ type: PAGE_FILTER_CHANGED, payload: keyword });
            gotoPage(0);
        }
    }, [keyword, gotoPage, useFilter]);

    React.useEffect(() => {
        if (data?.count) {
            dispatch({
                type: TOTAL_COUNT_CHANGED,
                payload: data.count,
            });
        }
    }, [data?.count]);

    if (error) {
        return <p>Error</p>;
    }


    if (isSuccess || isLoading)
        return (
            <>
                <div className="with_border with_padding">
                    <div className='row admin-table-filters'>
                        <div className="col-lg-9">

                            <form className="form-inline filters-form">
                                {/* test {refreshPage ? 'true' : 'false'} */}
                                <span>
                                    <label className="grey" htmlFor="showcount">Show:</label>
                                    <select className="form-control showcount"
                                        value={pageSize}
                                        onChange={(e) => {
                                            setPageSize(Number(e.target.value));
                                        }}
                                    >
                                        {[10, 20, 30, 40, 50].map((pageSize) => (
                                            <option key={pageSize} value={pageSize}>
                                                {pageSize}
                                            </option>
                                        ))}
                                    </select>


                                </span>
                            </form>

                        </div>
                        <div className="col-lg-3 text-lg-right">
                            <div className="widget widget_search">

                                <form method="get" className="searchform" >
                                    <UsersFilter onClickFilterCallback={onClickFilterCallback} defaultKeyword={keyword} />
                                </form>
                            </div>

                        </div>
                    </div>

                    <div className="table-responsive">
                        <table className="table table-striped table-bordered" {...getTableProps()}>
                            <thead>
                                {headerGroups.map((headerGroup) => (
                                    <tr {...headerGroup.getHeaderGroupProps()}>
                                        {headerGroup.headers.map(column => (
                                            <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                                                {column.render('Header')}
                                                {column.isSorted ? <Sorting column={column} /> : ''}
                                            </th>
                                        ))}
                                    </tr>
                                ))}
                            </thead>
                            <tbody className="table table--bordered" {...getTableBodyProps()}>
                                {
                                    isLoading ?
                                        <tr><td className="text-center" colSpan={6}>Loading...</td></tr>
                                        :
                                        typeof data?.count === 'undefined' || data?.count == 0 ?
                                            <tr><td className="text-center" colSpan={6}>No results found</td></tr>
                                            :
                                            <>
                                                {page.map(row => {
                                                    prepareRow(row);
                                                    return (
                                                        <tr className="item-editable" {...row.getRowProps()}>
                                                            {
                                                                row.cells.map(cell => {
                                                                    return <td {...cell.getCellProps()}><span>{cell.render('Cell')}</span></td>
                                                                })
                                                            }
                                                        </tr>
                                                    )
                                                })}
                                            </>
                                }

                            </tbody>
                        </table>
                    </div>

                </div>



                {(rows.length > 0) && (
                    <>
                        <ReactTablePagination
                            page={page}
                            gotoPage={gotoPage}
                            previousPage={previousPage}
                            nextPage={nextPage}
                            canPreviousPage={canPreviousPage}
                            canNextPage={canNextPage}
                            pageOptions={pageOptions}
                            pageSize={pageSize}
                            pageIndex={pageIndex}
                            pageCount={pageCount}
                            setPageSize={setPageSize}
                            manualPageSize={manualPageSize}
                            dataLength={totalCount}
                        />
                        <div className="row">
                            <div className="col-md-12 text-center">
                                <div className="pagination justify-content-center mt-2">
                                    <span>
                                        Go to page:{' '}
                                        <input
                                            type="number"
                                            value={pageIndex + 1}
                                            onChange={(e) => {
                                                const page = e.target.value ? Number(e.target.value) - 1 : 0;
                                                gotoPage(page);
                                            }}
                                            style={{ width: '100px' }}
                                        />
                                    </span>{' '}

                                </div>
                            </div>
                        </div>
                    </>
                )}

            </>
        )
}

const Sorting = ({ column }) => (
    <span className="react-table__column-header sortable">
        {column.isSortedDesc === undefined ? (
            <SortIcon />
        ) : (
            <span>
                {column.isSortedDesc
                    ? <SortAscendingIcon />
                    : <SortDescendingIcon />}
            </span>
        )}
    </span>
);


function Stallions() {

    const [refreshPage, setRefreshPage] = useState(false);
    const refreshPageData = (value) => {
        setRefreshPage(value)
    };

    return (

        <main className="admin">

            <div className="py-3 bg-gray-100">
                <div className="container">
                    <div className="row align-items-center">
                        <div className="col-lg-6 my-2">
                            <h1 className="m-0 h4 text-center text-lg-start">My Account</h1></div>
                        <div className="col-lg-6 my-2">
                            <ol className="breadcrumb dark-link m-0 small justify-content-center justify-content-lg-end">
                                <li className="breadcrumb-item"><a className="text-nowrap" href="#"><i className="bi bi-home"></i>Home</a></li>
                                <li className="breadcrumb-item text-nowrap active" aria-current="page">Change Password</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            <div className="py-6 my-account">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-3 mb-5 mb-lg-0">
                            <Sidebar />
                        </div>
                        <div className="col-lg-9">
                            <div className="tab-content" id="v-pills-tabContent">
                                <div className="tab-pane fade show active" id="v-pills-password" role="tabpanel" aria-labelledby="v-pills-password-tab">

                                    <section className="ls with_bottom_border">
                                        <div className="container-fluid">
                                            <div className="row">
                                                <div className="col-md-6">
                                                    <ol className="breadcrumb darklinks">
                                                        <li>
                                                            <a href="#">Dashboard</a>
                                                        </li>
                                                        <li className="active">Stallioins</li>
                                                    </ol>
                                                </div>

                                                <div className="col-md-6 text-md-right">
                                                    <Link to={`${PUBLIC_URL}stallions/add`} className="theme_button">
                                                        <i className="fa fa-plus"></i>&nbsp;
                                                        Add Stallion
                                                    </Link>
                                                </div>

                                            </div>
                                        </div>
                                    </section>

                                    <section className="ls section_padding_top_50 section_padding_bottom_50 columns_padding_10">
                                        <div className="container-fluid">

                                            <div className="row">
                                                <div className="col-md-12">
                                                    <h3>Stallioins</h3>
                                                </div>
                                            </div>

                                            <div className="row">
                                                <div className="col-xs-12">
                                                    <QueryClientProvider client={queryClient}>
                                                        <DataTable refreshPage={refreshPage} refreshPageData={refreshPageData} />
                                                    </QueryClientProvider>
                                                </div>
                                            </div>

                                        </div>
                                    </section>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </main>
    )
}

export default Stallions;
Enter fullscreen mode Exit fullscreen mode