FRȘah Design System

Tables

Admin lists use shadcn Table primitives and the shared DataTable wrapper from @/components/Tables, powered by TanStack Table.

import { DataTable } from '@/components/Tables/data-table';
import useTable from '@/hooks/use-table';

const table = useTable({ data: members, columns });
<DataTable table={table} />

Shadcn Table

Base table primitives for static markup and custom layouts.

Name	Status
Alexandru Popescu	Active
Maria Ionescu	Pending
Andrei Dumitrescu	Inactive

Basic table

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>...</TableBody>
</Table>

Club members

Registry and license status overview.

Name	FIDE ID	Status
Alexandru Popescu	12345678	Active
Maria Ionescu	87654321	Pending
Andrei Dumitrescu	11223344	Inactive

Card wrapper

<Card className="overflow-hidden">
  <CardHeader className="border-b">Club members</CardHeader>
  <CardContent className="p-0">
    <Table>...</Table>
  </CardContent>
</Card>

Data table

TanStack Table with the shared DataTable component from @/components/Tables.

Name	FIDE ID	Birth date	Club	City	FIDE rating	Title	Preferred format	Favorite opening	Preferred color	Federation	License no.	Status	Category	Joined
Alexandru Popescu	12345678	14.03.1998	CSU ASE Bucharest	Bucharest	2145	FM	Rapid	Sicilian Defense	White	ROU	RO-2021-0142	Active	Senior	12.01.2024
Maria Ionescu	87654321	22.07.2010	ACS Timișoara	Timișoara	1680	—	Blitz	Queen's Gambit	Black	ROU	RO-2023-0891	Pending	Junior	03.02.2024
Andrei Dumitrescu	11223344	05.11.1985	CSM Cluj	Cluj-Napoca	1987	CM	Classical	Ruy Lopez	White	ROU	RO-2018-0034	Inactive	Senior	18.03.2023
Elena Vasilescu	55667788	19.09.1995	CSU ASE Bucharest	Bucharest	2210	WFM	Rapid	Caro-Kann	Black	ROU	RO-2020-0567	Active	Open	25.04.2024
Cristian Marin	99887766	01.02.1979	CS Gloria Buzău	Buzău	2055	NM	Classical	King's Indian	Black	ROU	RO-2015-0118	Active	Senior	09.05.2024
Ioana Georgescu	44556677	30.06.2012	ACS Iași	Iași	1542	—	Blitz	Italian Game	White	ROU	RO-2024-1203	Pending	Junior	14.06.2024
Mihai Stan	33445566	17.12.2001	CSU ASE Bucharest	Bucharest	1893	—	Rapid	London System	White	ROU	RO-2022-0445	Active	Open	21.07.2024
Diana Popa	22334455	08.04.1990	CSM Brașov	Brașov	2078	WCM	Classical	French Defense	Black	ROU	RO-2019-0276	Inactive	Senior	02.08.2023

0 of 8 row(s) selected.

Members list

const [columnVisibility, setColumnVisibility] = useState({});
const [rowSelection, setRowSelection] = useState({});

const table = useReactTable({
  data: members,
  columns: getMemberColumns({ withSelection: true }),
  getCoreRowModel: getCoreRowModel(),
  getRowId: (row) => String(row.id),
  enableRowSelection: true,
  state: { columnVisibility, rowSelection },
  onColumnVisibilityChange: setColumnVisibility,
  onRowSelectionChange: setRowSelection,
});

<div className="flex items-center justify-end">
  <DataTableViewOptions table={table} />
</div>
<DataTable table={table} />

	Name	FIDE ID	Birth date	Club	City	FIDE rating	Title	Preferred format	Favorite opening	Preferred color	Federation	License no.	Status	Category	Joined	Actions

0 of 8 row(s) selected.

Loading state

<DataTable table={table} loading={true} />

	Name	FIDE ID	Birth date	Club	City	FIDE rating	Title	Preferred format	Favorite opening	Preferred color	Federation	License no.	Status	Category	Joined	Actions
No results.

0 of 0 row(s) selected.

Empty state

<DataTable table={table} /> // with data: []

Features

Sorting and column controls used in admin lists.

			Club	City		Title	Preferred format	Favorite opening	Preferred color	Federation	License no.	Status	Category
Alexandru Popescu	12345678	14.03.1998	CSU ASE Bucharest	Bucharest	2145	FM	Rapid	Sicilian Defense	White	ROU	RO-2021-0142	Active	Senior	12.01.2024
Maria Ionescu	87654321	22.07.2010	ACS Timișoara	Timișoara	1680	—	Blitz	Queen's Gambit	Black	ROU	RO-2023-0891	Pending	Junior	03.02.2024
Andrei Dumitrescu	11223344	05.11.1985	CSM Cluj	Cluj-Napoca	1987	CM	Classical	Ruy Lopez	White	ROU	RO-2018-0034	Inactive	Senior	18.03.2023
Elena Vasilescu	55667788	19.09.1995	CSU ASE Bucharest	Bucharest	2210	WFM	Rapid	Caro-Kann	Black	ROU	RO-2020-0567	Active	Open	25.04.2024
Cristian Marin	99887766	01.02.1979	CS Gloria Buzău	Buzău	2055	NM	Classical	King's Indian	Black	ROU	RO-2015-0118	Active	Senior	09.05.2024
Ioana Georgescu	44556677	30.06.2012	ACS Iași	Iași	1542	—	Blitz	Italian Game	White	ROU	RO-2024-1203	Pending	Junior	14.06.2024
Mihai Stan	33445566	17.12.2001	CSU ASE Bucharest	Bucharest	1893	—	Rapid	London System	White	ROU	RO-2022-0445	Active	Open	21.07.2024
Diana Popa	22334455	08.04.1990	CSM Brașov	Brașov	2078	WCM	Classical	French Defense	Black	ROU	RO-2019-0276	Inactive	Senior	02.08.2023

0 of 8 row(s) selected.

Sortable columns

header: ({ column }) => (
  <DataTableColumnHeader column={column} title="Name" />
)

Name	FIDE ID	Birth date	Club	City	FIDE rating	Title	Preferred format	Favorite opening	Preferred color	Federation	License no.	Status	Category	Joined
Alexandru Popescu	12345678	14.03.1998	CSU ASE Bucharest	Bucharest	2145	FM	Rapid	Sicilian Defense	White	ROU	RO-2021-0142	Active	Senior	12.01.2024
Maria Ionescu	87654321	22.07.2010	ACS Timișoara	Timișoara	1680	—	Blitz	Queen's Gambit	Black	ROU	RO-2023-0891	Pending	Junior	03.02.2024
Andrei Dumitrescu	11223344	05.11.1985	CSM Cluj	Cluj-Napoca	1987	CM	Classical	Ruy Lopez	White	ROU	RO-2018-0034	Inactive	Senior	18.03.2023
Elena Vasilescu	55667788	19.09.1995	CSU ASE Bucharest	Bucharest	2210	WFM	Rapid	Caro-Kann	Black	ROU	RO-2020-0567	Active	Open	25.04.2024
Cristian Marin	99887766	01.02.1979	CS Gloria Buzău	Buzău	2055	NM	Classical	King's Indian	Black	ROU	RO-2015-0118	Active	Senior	09.05.2024
Ioana Georgescu	44556677	30.06.2012	ACS Iași	Iași	1542	—	Blitz	Italian Game	White	ROU	RO-2024-1203	Pending	Junior	14.06.2024
Mihai Stan	33445566	17.12.2001	CSU ASE Bucharest	Bucharest	1893	—	Rapid	London System	White	ROU	RO-2022-0445	Active	Open	21.07.2024
Diana Popa	22334455	08.04.1990	CSM Brașov	Brașov	2078	WCM	Classical	French Defense	Black	ROU	RO-2019-0276	Inactive	Senior	02.08.2023

0 of 8 row(s) selected.

Row selection

const [rowSelection, setRowSelection] = useState({});

const table = useReactTable({
  data: members,
  columns: getMemberColumns({ withSelection: true }),
  getCoreRowModel: getCoreRowModel(),
  getRowId: (row) => String(row.id),
  enableRowSelection: true,
  state: { rowSelection },
  onRowSelectionChange: setRowSelection,
});

<DataTable table={table} />

Name	FIDE ID	Birth date	Club	City	FIDE rating	Title	Preferred format	Favorite opening	Preferred color	Federation	License no.	Status	Category	Joined
Alexandru Popescu	12345678	14.03.1998	CSU ASE Bucharest	Bucharest	2145	FM	Rapid	Sicilian Defense	White	ROU	RO-2021-0142	Active	Senior	12.01.2024
Maria Ionescu	87654321	22.07.2010	ACS Timișoara	Timișoara	1680	—	Blitz	Queen's Gambit	Black	ROU	RO-2023-0891	Pending	Junior	03.02.2024
Andrei Dumitrescu	11223344	05.11.1985	CSM Cluj	Cluj-Napoca	1987	CM	Classical	Ruy Lopez	White	ROU	RO-2018-0034	Inactive	Senior	18.03.2023
Elena Vasilescu	55667788	19.09.1995	CSU ASE Bucharest	Bucharest	2210	WFM	Rapid	Caro-Kann	Black	ROU	RO-2020-0567	Active	Open	25.04.2024
Cristian Marin	99887766	01.02.1979	CS Gloria Buzău	Buzău	2055	NM	Classical	King's Indian	Black	ROU	RO-2015-0118	Active	Senior	09.05.2024
Ioana Georgescu	44556677	30.06.2012	ACS Iași	Iași	1542	—	Blitz	Italian Game	White	ROU	RO-2024-1203	Pending	Junior	14.06.2024
Mihai Stan	33445566	17.12.2001	CSU ASE Bucharest	Bucharest	1893	—	Rapid	London System	White	ROU	RO-2022-0445	Active	Open	21.07.2024
Diana Popa	22334455	08.04.1990	CSM Brașov	Brașov	2078	WCM	Classical	French Defense	Black	ROU	RO-2019-0276	Inactive	Senior	02.08.2023

0 of 8 row(s) selected.

Column visibility

const [columnVisibility, setColumnVisibility] = useState({});

const table = useReactTable({
  data: members,
  columns,
  getCoreRowModel: getCoreRowModel(),
  state: { columnVisibility },
  onColumnVisibilityChange: setColumnVisibility,
});

<DataTableViewOptions table={table} />
<DataTable table={table} />