Datatable Example

Translate in French

1 - 50 / 500

0 selected

First name	lastName	Age	Visits	Status	Profile Progress
Sylvan	Gorczany	2	290	relationship	7
Madisen	Von	40	984	single	75
George	Wiegand	25	794	single	97
Lucy	Christiansen	21	972	complicated	70
Josh	Emard	34	583	single	85
Ivory	Jast	23	551	single	46
Pascale	Bogisich	8	331	complicated	70
Miguel	Bruen	4	252	single	91
Grace	Macejkovic	35	734	single	35
Mary	Abernathy	0	328	single	71
Delia	Howell	4	904	relationship	16
Isaac	Marvin	38	657	complicated	92
Frederick	Leffler	2	574	complicated	14
Sidney	Harber	34	305	single	5
Linda	O'Conner	34	397	relationship	42
Noble	Connelly	7	822	complicated	20
Kailyn	Rice	33	231	relationship	7
Benjamin	Murazik	7	82	relationship	40
Frankie	Dooley	13	847	relationship	8
Wilbur	Hilpert	6	646	complicated	41
Angelina	Auer	40	420	single	13
Trevion	Hand	31	879	complicated	7
Destinee	Mayer	2	918	relationship	94
Crystel	Zemlak	14	572	single	21
Ella	Krajcik	31	299	relationship	8
Matteo	Gislason	22	983	complicated	64
Sean	Medhurst	24	662	complicated	60
Zachary	Mosciski	28	592	single	56
Rudolph	Powlowski	31	568	relationship	52
Herta	Glover	14	498	complicated	19
Loyal	Mohr	12	493	complicated	28
Camille	Herman-Hane	35	728	relationship	97
Kaitlyn	Hintz	0	372	single	7
Silvia	Botsford	4	294	complicated	45
Nathanial	D'Amore	31	514	relationship	92
Edd	Schmitt	11	273	single	55
Allen	Stroman	16	345	relationship	31
Madalyn	Wisoky	19	353	relationship	72
Nora	McKenzie	23	715	single	46
Suzanne	Stark	6	575	single	23
Gilberto	Zieme	10	361	complicated	40
Stan	Gislason	8	722	single	43
Freda	D'Amore	19	357	complicated	81
Rufus	Halvorson	18	385	relationship	59
Chanelle	Purdy	40	842	single	96
Bo	Kirlin-Hermiston	14	895	complicated	89
Noble	Davis	26	945	relationship	29
Sylvia	Greenholt	29	137	single	32
Karen	Rohan	37	817	relationship	55
Hardy	Kessler	12	530	complicated	56

Selected

{ "selectAll": false, "selectedIds": [], "excludedIds": [] }

How to use this separator

Props

Name	Type	Default	Description
data	MyCustomType[]	-	The data displayed in the tab.
columns	<ColumnDef<MyCustomType>[]>	-	The name of the colomns, how to get it, actions on column...
isLoading	boolean	-	Displays a skeleton on rows while loading.
tableOptions	{onRowSelectionChange, getSortedRowModel, getPaginationRowModel, onPaginationChange, enableRowSelection, onColumnOrderChange }	-	Change the default rendered element for the one passed as a child, merging their props and behavior.
tableState	{columnVisibility, columnOrder: string[], columnPinning:{left: string[], right: string[] }, rowPinning{bottom: string[], top: string[] }, columnFilters: {id: string, value: unknown }[], globalFilter: any, sorting: {desc: boolean, id: string }[], expanded:?, grouping: string[], columnSizing:?, columnSizingInfo: { columnSizingStart: [string, number][], deltaOffset: null \| number,deltaPercentage: null \| number,isResizingColumn: false \| string, startOffset: null \| number, startSize: null \| number } }	-	Change the default rendered element for the one passed as a child, merging their props and behavior.
onClickRow	(row: Row<TData>) => void	-	Action function triggered when the user clicks on a row.
onResetTable	() => void	-	Reset localStorage used for preferences (order table, number of rows...).
toolbar	ReactNode	-	Put anything in this toolbar : button, text, select...
selection	{ createSelectionColumn?: boolean, totalSelectableCount?: number,selectionState?: {state, onSelectionChange}, handlers?: {isRowSelected?,toggleRow?,toggleSelectAll?,getSelectionCount?,clearSelection?,isAllSelected?,isSomeSelected?},selectionHeader?: {custom?: (props: {selectionState: SelectionState}) => ReactNode, actions?: (props: {selectionState: SelectionState}) => ReactNode} }	-	Activate and changes the default display or behavior of the table selection

Playground

Import from @filigran/ui :

Import {Separator} from '@filigran/ui'

Everything possible for declaring columns :