@bilalsino/react-tanstack-data-table/dist/index.d.mts

Reusable React data table component with sorting, filtering, and pagination

import * as zustand from 'zustand';
import { ColumnFiltersState, SortingState, PaginationState, ColumnPinningState, RowSelectionState, ColumnDef, Table, Row } from '@tanstack/react-table';
export { ColumnDef, ColumnFiltersState, PaginationState, SortingState, Table, VisibilityState } from '@tanstack/react-table';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { ReactNode, Dispatch, SetStateAction, ComponentType, InputHTMLAttributes } from 'react';
import { ClassValue } from 'clsx';
import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
import { Matcher } from 'react-day-picker';
import { VariantProps } from 'class-variance-authority';

type TableFilter = {
    tableId: string;
    globalFilter: string;
    columnFilters: ColumnFiltersState;
    sorting: SortingState;
    pagination: PaginationState;
    columnPinning: ColumnPinningState;
    rowSelection: RowSelectionState;
};
interface TableStore {
    tableData: TableFilter[];
    setTableData: (tableData: TableFilter) => void;
    removeTableData: (tableId: string) => void;
}
declare const useTableStore: zustand.UseBoundStore<Omit<zustand.StoreApi<TableStore>, "setState"> & {
    setState(partial: TableStore | Partial<TableStore> | ((state: TableStore) => TableStore | Partial<TableStore>), replace?: false | undefined, action?: (string | {
        [x: string]: unknown;
        [x: number]: unknown;
        [x: symbol]: unknown;
        type: string;
    }) | undefined): void;
    setState(state: TableStore | ((state: TableStore) => TableStore), replace: true, action?: (string | {
        [x: string]: unknown;
        [x: number]: unknown;
        [x: symbol]: unknown;
        type: string;
    }) | undefined): void;
}>;

declare module "@tanstack/react-table" {
    interface ColumnMeta<TData, TValue> {
        enableCustomFilter?: boolean;
        filterType?: "text" | "select" | "number" | "date" | "boolean";
    }
}
type RowComponent<T extends Record<string, any>> = ComponentType<{
    row: Row<T>;
}>;
type Action<T> = ReactNode | ((props: {
    selectedRows: T[];
    pagination: PaginationState;
    setRowSelection: Dispatch<SetStateAction<RowSelectionState>>;
    setGlobalFilter: Dispatch<SetStateAction<any>>;
    setPagination: Dispatch<SetStateAction<PaginationState>>;
    table: Table<T>;
}) => ReactNode);
interface CustomTableProps<T extends Record<string, any>> {
    tableId: string;
    columns: ColumnDef<T, any>[];
    manualPagination?: boolean;
    customPagination?: Action<T>;
    rows: {
        data: T[];
        rowCount?: number;
        pageCount?: number;
    };
    defaultPageSize?: number;
    defaultPinnedColumns?: ColumnPinningState;
    manualSearch?: boolean;
    cardComponent?: ReactNode | ((props: {
        row: Row<T>;
    }) => ReactNode);
    bulkActions?: Action<T>;
    rightTop?: Action<T>;
    leftTop?: Action<T>;
    viewMode?: "table" | "card";
    pageOffset?: number;
    scrollable?: boolean;
    isLoading?: boolean;
    maxHeight?: string;
    minHeight?: string;
    defaultSorting?: SortingState;
    emptyContent?: ReactNode;
}

declare const CustomTable: <T extends Record<string, any>>({ tableId, columns, rows, defaultPageSize, manualPagination, customPagination, defaultPinnedColumns, cardComponent, bulkActions, manualSearch, rightTop, leftTop, viewMode, pageOffset, scrollable, isLoading, defaultSorting, maxHeight, minHeight, emptyContent, }: CustomTableProps<T>) => react_jsx_runtime.JSX.Element;

interface PaginationProps<T extends Record<string, any>> {
    table?: Table<T>;
    rows: CustomTableProps<T>["rows"];
    pagination: PaginationState;
    setPagination: Dispatch<SetStateAction<PaginationState>>;
    manualPagination?: boolean;
    loading?: boolean;
    hidePageSize?: boolean;
    showTotalCount?: boolean;
}
declare const Pagination: <T extends Record<string, any>>({ table, setPagination, pagination, rows, manualPagination, loading, hidePageSize, showTotalCount, }: PaginationProps<T>) => react_jsx_runtime.JSX.Element;

declare const checkboxColumn: <T extends Record<string, any>>() => ColumnDef<T>[];
declare const actionColumn: <T extends Record<string, any>>(Component: RowComponent<T>, size?: number) => ColumnDef<T>[];

declare function cn(...inputs: ClassValue[]): string;

declare const calendarVariants: (props?: ({
    intent?: "secondary" | "primary" | "success" | "white" | "transparent" | "refresh" | null | undefined;
    hasLeftIcon?: boolean | null | undefined;
    hasRightIcon?: boolean | null | undefined;
    hasError?: boolean | null | undefined;
    variant?: "filter" | "default" | "waitlist" | null | undefined;
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;

interface CalendarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onSelect" | "disabled">, VariantProps<typeof calendarVariants> {
    label?: string;
    value?: Date;
    disabled?: Matcher;
    onSelect?: (date: Date) => void;
}

export { type CalendarProps, CustomTable, type CustomTableProps, Pagination, type TableFilter, actionColumn, checkboxColumn, cn, useTableStore };