arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 20:19:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Table): extends core options and support other options like pagination (#3177)

Browse Source 
Co-authored-by: Sandros94 <sandro.circi@digitoolmedia.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Muhammad Mahmoud
2025-02-05 23:04:00 +02:00
committed by GitHub
parent c5bb540519
commit 4aa317944e
5 changed files with 312 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs/content/3.components/table.md
View File

@@ -336,7 +336,7 @@ You can use the `column-pinning` prop to control the pinning state of the column
### With column visibility
You can add use [DropdownMenu](/components/dropdown-menu) component to toggle the visibility of the columns using the TanStack Table [Column Visibility APIs](https://tanstack.com/table/latest/docs/api/features/column-visibility).
You can use a [DropdownMenu](/components/dropdown-menu) component to toggle the visibility of the columns using the TanStack Table [Column Visibility APIs](https://tanstack.com/table/latest/docs/api/features/column-visibility).
::component-example
---
@@ -391,6 +391,25 @@ class: '!p-0'
You can use the `global-filter` prop to control the global filter state (can be binded with `v-model`).
::
### With pagination
You can use a [Pagination](/components/pagination) component to control the pagination state using the [Pagination APIs](https://tanstack.com/table/latest/docs/api/features/pagination).
There are different pagination approaches as explained in [Pagination Guide](https://tanstack.com/table/latest/docs/guide/pagination#pagination-guide). In this example, we use client-side pagination so we need to manually pass `getPaginationRowModel()`{lang="ts-type"} function.
::component-example
---
prettier: true
collapse: true
name: 'table-pagination-example'
class: '!p-0'
---
::
::tip
You can use the `pagination` prop to control the pagination state (can be binded with `v-model`).
::
### With fetched data
You can fetch data from an API and use them in the Table.