Datatable Example

Translate in French

1 - 50 / 500

0 selected

First name	lastName	Age	Visits	Status	Profile Progress
Leon	Terry	16	149	single	8
Jamaal	Raynor	23	201	single	24
Eva	Collins	10	303	complicated	0
Zackery	Stanton	6	16	relationship	52
Theodora	Tremblay	27	58	single	8
Wade	Bechtelar	23	219	complicated	5
Serena	Hudson	33	752	relationship	73
Deron	Mayert	16	726	single	26
Reginald	Hackett	1	265	relationship	29
Elliot	Koepp	15	787	complicated	98
Robbie	Kovacek	15	87	relationship	9
Manuel	Dickens	21	715	complicated	28
Lance	Jast	26	27	complicated	21
Missouri	Glover	20	714	relationship	35
Roberta	Volkman	33	714	single	16
Calvin	Barrows	15	794	single	4
Julio	Stoltenberg	26	765	relationship	11
Sylvester	Rice	7	519	single	32
Elijah	Pfeffer	3	27	complicated	50
Fabiola	Rutherford	13	684	single	91
Brannon	Corwin	24	418	complicated	61
Francisco	Hudson-Goldner	26	166	single	58
Marguerite	Hagenes	2	135	relationship	79
Virgil	Lebsack	7	76	single	15
Tricia	Bahringer	9	271	relationship	47
Stewart	Sauer	11	986	complicated	5
Kraig	Collier	25	801	single	47
Madeline	Morar	17	182	relationship	3
Robin	Collier	13	775	single	4
Ervin	Daniel	16	685	relationship	52
Rosemary	Altenwerth	20	214	single	35
Bryant	Considine	35	951	relationship	74
Francis	Feest-Bartell	26	58	single	27
Imani	Russel	28	756	complicated	10
Jorge	Schimmel	26	685	single	66
Dewey	Durgan	31	839	relationship	97
Jordane	Rempel	13	442	single	79
Geovany	Williamson	39	156	single	96
Twila	Trantow	38	138	single	62
Carey	Renner	38	422	single	58
Wilfred	Barton	12	847	relationship	53
Marian	Lubowitz	0	631	single	6
Estelle	Mayer	2	776	complicated	11
Casimer	Gottlieb	23	819	relationship	6
Tami	Schmeler	29	499	complicated	96
Joyce	Jaskolski	22	117	relationship	99
Tricia	Dickinson	28	997	complicated	93
Jacky	Kertzmann	13	663	single	92
Dianna	Wiza	20	427	complicated	88
Inez	Krajcik	10	488	relationship	1

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 :