@craft-code/react-tanstack-table NPM

React tanstack-table

About

taillwind (twin.macro) based implementation of @tanstack/react-table headless library, follows the meterial design look and feel (mostly)

main features:

column filter
column sort
custom cell content
column visibility
client-side pagination
server-side pagination
dark mode 🌚

options and props

name	type	description
*data``**	`T`	data to display in the table rows
*columnDef``**	columnDef\<`T`>	column display definition
dark	boolean	switch to dark mode
variant	TableVariants \| TableVariants[]	overall look of the table
ActionArea	React.ReactNode	component to show nexet to the pagination
asyncDataLength	number	for `server-side` pagination mode
isLoading	boolean	toggles the view of the loading component
Labels	ITableLabels	static strings and components for localization
maxHeight	string \| number	max height for the whole compnent *table+controls*
rowsPerPageOptionsList	number[]	options for the page lenght select
paginationMode	PaginationModes	specifies how the pagination work
paginationProps	IPaginationProperties	pagination state & control
tableElemProps	React.ComponentProps<`"table"`>	basic props that is passed to the \ elemnt
tableSettings	ITableSettings\<`T`>	---

types & interfaces

TableVariants

type TableVariants =
  | "stripped"
  | "primary"
  | "secondary"
  | "hover"
  | "borders"
  | "out-border"
  | "contrast-header"
  | "sticky-header"
  | "sticky-controls"; // you might need this in some situations
  | undefined

ITableLabels

interface ITableLabels {
  noData: React.ReactNode;
  loading: React.ReactNode;
  pagination?: {
    from?: string;
    to?: string;
    rowsPerPage?: string;
  };
}

PaginationModes

type PaginationModes = "client-side" | "server-side" | false;

IPaginationProperties

interface IPaginationProperties {
  pageIndex?: number;
  pageSize?: number;
  showFirstButton?: boolean;
  showLastButton?: boolean;
  onSizeChange?: (pageSize: number) => void;
  onIndexChange?: (pageIndex: number) => void;
}