deep-jade•8mo ago

How to get the current amount of shown records in mantine

I would like to programmatically know how many records are currently being shown on the list page and how I can change that?

8 Replies

kapa.ai•8mo ago

Hi @blackbearftw. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In refine, you can use the useTable hook to manage the state of your table, including the number of records shown per page. The pageSize key in the pagination object represents the number of records per page. By default, pageSize is 10, but you can change this default value by passing the pagination.pageSize prop to the useTable hook. Here is an example of how you can use it:

const {  
 tableQueryResult,  
 current,  
 setCurrent,  
 pageSize,  
 setPageSize,  
 pageCount,  
} = useTable<IPost, HttpError>();

const {  
 tableQueryResult,  
 current,  
 setCurrent,  
 pageSize,  
 setPageSize,  
 pageCount,  
} = useTable<IPost, HttpError>();

In this example, pageSize is the number of records shown per page. You can change the pageSize value by using the setPageSize function that is returned by the useTable hook. Every change will trigger a new fetch. For more details, you can refer to the useTable documentation (https://refine.dev/docs/core/hooks/use-table#pagination). To get the current amount of shown records, you can simply count the number of records in the current page data. In the example above, tableQueryResult?.data?.data is an array of the posts for the current page, so tableQueryResult?.data?.data.length will give you the number of records currently being shown.

// Fetches the posts for the current page  
const posts = tableQueryResult?.data?.data ?? [];  
const currentRecordCount = posts.length;

// Fetches the posts for the current page  
const posts = tableQueryResult?.data?.data ?? [];  
const currentRecordCount = posts.length;

Please note that the actual variable names and data structure may vary depending on your specific use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below

deep-jade•8mo ago

@kapa.ai how can I change it from 10 to 20

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You can change the number of records shown per page by setting the pageSize property in the pagination object when you call the useTable hook. Here's an example of how you can set it to 20:

import { useTable } from "@refinedev/core";  

useTable({  
 pagination: {  
  pageSize: 20,  
 },  
});

import { useTable } from "@refinedev/core";  

useTable({  
 pagination: {  
  pageSize: 20,  
 },  
});

In this example, pageSize is set to 20, which means 20 records will be shown per page. This setting will be used for the initial render of the table. For more details, you can refer to the useTable documentation (https://refine.dev/docs/core/hooks/use-table#paginationpagesize). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below

deep-jade•8mo ago

can I set that as default globally @kapa.ai can I set that as default globally @kapa.ai

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can set the default pageSize globally for your application. However, based on the provided extracts, there isn't a direct way to set this globally for all useTable hooks. You would typically set the pageSize in the pagination object each time you call the useTable hook. Here's an example:

import { useTable } from "@refinedev/core";  

useTable({  
 pagination: {  
  pageSize: 20,  
 },  
});

import { useTable } from "@refinedev/core";  

useTable({  
 pagination: {  
  pageSize: 20,  
 },  
});

kapa.ai•8mo ago

<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below