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

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

import * as react_jsx_runtime from 'react/jsx-runtime';
import { ColumnDef, PaginationState, RowSelectionState, Table, ColumnPinningState, Row, SortingState } from '@tanstack/react-table';
export { ColumnDef, ColumnFiltersState, PaginationState, SortingState, Table, VisibilityState } from '@tanstack/react-table';
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';

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;
}
declare const Pagination: <T extends Record<string, any>>({ table, setPagination, pagination, rows, manualPagination, loading, }: 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, actionColumn, checkboxColumn, cn };