Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

how can i sort table in frontend


in react metronic demo 1 theme you are using api for sorting the table, but i want to sort table here in frontend but an error is occuring, like metronic react table i am writing this code for sorting.

" const { getTableProps, getTableBodyProps, headers, rows, prepareRow } = useTable({
columns,
data,
}, useSortBy);"

here is am using useSortBy for sorting, but when i am reloading my page an error is occuring whic his saying "Maximum update depth exceeded." please help me to go out from this problem.

here is my full code for refrence
"import { useMemo, useState } from 'react';
import { useTable, ColumnInstance, Row, useSortBy } from 'react-table';
import { CustomHeaderColumn } from './columns/CustomHeaderColumn';
import { CustomRow } from './columns/CustomRow';
import { useQueryResponseData, useQueryResponseLoading } from '../core/QueryResponseProvider';
import { usersColumns } from './columns/_columns';
import { User } from '../core/_models';
import { UsersListLoading } from '../components/loading/UsersListLoading';
import { UsersListPagination } from '../components/pagination/UsersListPagination';
import { KTCardBody } from '../../../../../../_base/helpers';


const UsersTable = () => {
const users = useQueryResponseData();
const isLoading = useQueryResponseLoading();
const [currentPage, setCurrentPage] = useState<number>(1);
const usersPerPage: number = 5;
const data = useMemo(() => users, [users]);
const columns = useMemo(() => usersColumns, []);
const { getTableProps, getTableBodyProps, headers, rows, prepareRow } = useTable({
columns,
data,
},useSortBy);


const indexOfLastUser: number = currentPage * usersPerPage;
const indexOfFirstUser: number = indexOfLastUser - usersPerPage;
const currentUsers: Row<User>[] = rows.slice(indexOfFirstUser, indexOfLastUser);


const paginate = (pageNumber: number) => setCurrentPage(pageNumber);


return (
<KTCardBody className='py-4'>
<div className='table-responsive'>
<table
id='kt_table_users'
className='table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer'
{...getTableProps()}
>
<thead>
<tr className='text-start text-muted fw-bolder fs-7 text-uppercase gs-0'>
{headers.map((column: ColumnInstance<User>) => (
<CustomHeaderColumn key={column.id} column={column} />
))}
</tr>
</thead>
<tbody className='text-gray-600 fw-bold' {...getTableBodyProps()}>
{currentUsers.length > 0 ? (
currentUsers.map((row: Row<User>, i) => {
prepareRow(row);
return <CustomRow row={row} key={`row-${i}-${row.id}`} />;
})
) : (
<tr>
<td colSpan={7}>
<div className='d-flex text-center w-100 align-content-center justify-content-center'>
No matching records found
</div>
</td>
</tr>
)}
</tbody>
</table>
</div>
<UsersListPagination paginate={paginate} currentPage={currentPage} usersPerPage={usersPerPage} totalUsers={rows.length} />
{isLoading && <UsersListLoading />}
</KTCardBody>
);
};


export { UsersTable };"


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi,

Thank you for reaching out to us.

In our example, we are using server data and sorting is implemented on the server side as well if you want to sort your data on the client you can fetch entire data with one request and then you can sort your array by property value using array-sort-by dependency.
https://github.com/jherax/array-sort-by

Please note, that if you have static data or your server's data doesn't have many rows client sort implementation will work for you, but you might face problems when trying to sort big arrays and in this case, I highly suggest you to use server-side sort and pagination, as it is demonstrated in our example.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Deleted comment
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(