tanstack-shadcn-table
Version:
A powerful, feature-rich React table component built on top of TanStack Table v8 with shadcn/ui styling. Optimized bundle size with 55% reduction through peer dependencies.
159 lines (158 loc) • 4.8 kB
TypeScript
import { FilterFn, SortingFn } from "@tanstack/react-table";
import type { TableOptions } from "../types/types";
import { RankingInfo } from "@tanstack/match-sorter-utils";
import { fuzzyFilter, fuzzySort } from "./actions";
import React from "react";
declare module "@tanstack/react-table" {
interface FilterFns {
fuzzy: FilterFn<unknown>;
}
interface FilterMeta {
itemRank: RankingInfo;
}
interface SortingFns {
fuzzy: SortingFn<unknown>;
}
}
/**
* Props for the DataTable component
*
* @template TData - The type of data in each row
*
* @example
* ```tsx
* <DataTable
* tableOptions={{
* data: users,
* columns: userColumns,
* pagination: { pageSize: 10, totalRecords: 100 },
* }}
* className="my-table"
* />
* ```
*/
export type DataTableProps<TData> = {
/** Main configuration object for the table */
readonly tableOptions: TableOptions<TData>;
/** Additional CSS classes for the table container */
readonly className?: string;
/** Custom table component (default: shadcn Table) */
readonly TableComponent?: React.ElementType;
/** Custom table header component */
readonly TableHeaderComponent?: React.ElementType;
/** Custom table row component */
readonly TableRowComponent?: React.ElementType;
/** Custom table cell component */
readonly TableCellComponent?: React.ElementType;
/** Custom table head component */
readonly TableHeadComponent?: React.ElementType;
/** Custom table body component */
readonly TableBodyComponent?: React.ElementType;
/** Custom table footer component */
readonly TableFooterComponent?: React.ElementType;
};
/**
* A powerful, feature-rich React table component built on top of TanStack Table v8 with shadcn/ui styling.
*
* Features:
* - Advanced filtering (text, range, select, boolean, custom)
* - Multi-column sorting with fuzzy search support
* - Flexible pagination with customizable layouts
* - Column reordering (drag & drop)
* - Column resizing with interactive drag handles
* - Row selection (single and multi-row)
* - Global search with fuzzy matching
* - Lazy loading for server-side data
* - Column visibility controls
* - Internationalization support (5 languages)
* - Built-in security features (XSS protection, input sanitization)
*
* @template TData - The type of data in each row
*
* @param props - DataTable component props
* @param props.tableOptions - Main configuration object for the table
* @param props.className - Additional CSS classes for the table container
* @param props.TableComponent - Custom table component (default: shadcn Table)
* @param props.TableHeaderComponent - Custom table header component
* @param props.TableRowComponent - Custom table row component
* @param props.TableCellComponent - Custom table cell component
* @param props.TableHeadComponent - Custom table head component
* @param props.TableBodyComponent - Custom table body component
* @param props.TableFooterComponent - Custom table footer component
*
* @returns The rendered DataTable component
*
* @example
* ```tsx
* import { DataTable, ColumnDef } from "tanstack-shadcn-table";
*
* type Person = {
* firstName: string;
* lastName: string;
* age: number;
* };
*
* const columns: ColumnDef<Person>[] = [
* {
* accessorKey: "firstName",
* header: "First Name",
* filter: {
* type: "text",
* field: "firstName",
* placeholder: "Search...",
* },
* },
* {
* accessorKey: "age",
* header: "Age",
* filter: {
* type: "range",
* field: "age",
* },
* },
* ];
*
* function App() {
* return (
* <DataTable
* tableOptions={{
* data: people,
* columns,
* pagination: {
* pageSize: 10,
* totalRecords: people.length,
* },
* }}
* />
* );
* }
* ```
*
* @example
* ```tsx
* // With lazy loading
* <DataTable
* tableOptions={{
* data,
* columns,
* lazy: true,
* onLazyLoad: async (event) => {
* const result = await fetchData({
* page: event.page,
* pageSize: event.rows,
* filters: event.filters,
* sorting: event.sorting,
* });
* setData(result.data);
* },
* pagination: {
* pageSize: 20,
* totalRecords: 1000,
* },
* }}
* />
* ```
*/
export declare function DataTable<TData>({ tableOptions, className, TableComponent, TableHeaderComponent, TableHeadComponent, TableRowComponent, TableCellComponent, TableBodyComponent, TableFooterComponent, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
export default DataTable;
export { fuzzyFilter, fuzzySort };