zeed-dynamic-table/dist/index.d.ts

A flexible and dynamic table component for React and Next.js applications without Tailwind dependencies

import * as react_jsx_runtime from 'react/jsx-runtime';
import React$1, { ReactNode, HTMLProps, CSSProperties } from 'react';
import { ClassValue } from 'clsx';

/**
 * Options for select/dropdown components
 */
type OptionOptions = {
    data?: string[];
    onChange?: (value: string) => void;
    apiLink?: string;
    onRes?: (value: any) => void;
    component?: (data: any) => ReactNode;
    onCatch?: (error?: any) => void;
};
/**
 * Options for action column items
 */
type ActionsOptionsType = {
    componenet?: ReactNode;
    onClick?: (data: any) => void;
    useLink?: boolean;
    linkOptions?: LinkOptionsType;
};
/**
 * Actions column configuration
 */
type ActionsType = {
    components?: (data: any) => ReactNode;
};
/**
 * Link configuration options
 */
type LinkOptionsType = {
    href?: string;
    className?: string;
    target?: string;
};
/**
 * Chip/badge options
 */
type ChipOptions = {
    className?: string;
    color?: string;
    size?: "sm" | "md" | "lg";
};
/**
 * Column render configuration when using conditions
 */
type ColumnConditionsRenderType<K extends string> = {
    accessor?: K;
    static?: string | number;
    useDate?: boolean;
    join?: K[];
    useAction?: boolean;
    actionOptions?: ActionsType;
    useOption?: boolean;
    optionOptions?: OptionOptions;
    useLink?: boolean;
    linkOptions?: LinkOptionsType;
    normalProps?: {
        th?: HTMLProps<HTMLTableColElement>;
        td?: HTMLProps<HTMLTableColElement>;
        tHeadTr?: HTMLProps<HTMLTableRowElement>;
        tBodyTr?: HTMLProps<HTMLTableRowElement>;
    };
    useChip?: boolean;
    chipOptions?: ChipOptions;
};
/**
 * Condition configuration for conditional column rendering
 */
type ColumnConditionsType<T extends string> = {
    condtion: boolean | {
        compare: string[];
    };
    redner: ColumnConditionsRenderType<T>;
};
/**
 * Main column configuration
 */
type ColumnType<K extends string> = {
    columnName: string;
    accessor?: K;
    static?: string | number;
    showIf?: boolean;
    condtions?: ColumnConditionsType<K>[];
    useCondition?: boolean;
    rename?: string;
    useDate?: boolean;
    join?: K[];
    useAction?: boolean;
    actionOptions?: ActionsType;
    useOption?: boolean;
    optionOptions?: OptionOptions;
    useLink?: boolean;
    linkOptions?: LinkOptionsType;
    useChip?: boolean;
    chipOptions?: ChipOptions;
    normalProps?: {
        th?: HTMLProps<HTMLTableColElement>;
        td?: HTMLProps<HTMLTableCellElement>;
    };
};
/**
 * Options for the "Add" button in table top content
 */
type TopContentAddButtonType = {
    title?: string;
    startContent?: ReactNode;
    endContent?: ReactNode;
};
/**
 * Options for the search input in table top content
 */
type TopContentSearhInputType = {
    placeholder?: string;
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
};
/**
 * Configuration for table top content
 */
type TopContentOptionsType = {
    addButton?: HTMLProps<HTMLButtonElement> & TopContentAddButtonType;
    searchInput?: HTMLProps<HTMLInputElement> & TopContentSearhInputType;
    moreComponents?: ReactNode;
    baseProps?: HTMLProps<HTMLDivElement>;
    leftBaseProps?: HTMLProps<HTMLDivElement>;
    rightBaseProps?: HTMLProps<HTMLDivElement>;
    moreComponentBaseProps?: HTMLProps<HTMLDivElement>;
};
type PlainObjectKeys<T> = {
    [K in keyof T]: T[K] extends (...args: any[]) => any ? never : K;
}[keyof T];
type MaxDepth = 10;
type NestedFieldPaths<TData, Depth extends number = MaxDepth> = {
    [TKey in PlainObjectKeys<TData>]: TData[TKey] extends object ? Depth extends 0 ? `${TKey & string}` : `${TKey & string}` | `${TKey & string}.${NestedFieldPaths<TData[TKey], Prev<Depth>>}` : `${TKey & string}`;
}[PlainObjectKeys<TData>];
type Prev<N extends number> = N extends 0 ? never : N extends 1 ? 0 : N extends 2 ? 1 : N extends 3 ? 2 : never;
/**
 * Pagination configuration
 */
type PAGINATION_TYPE = {
    per_page: number;
    page: number;
    totalPages: number;
    handlePageChange: (page: number) => void;
    per_pageComponent?: ReactNode;
    baseProps?: HTMLProps<HTMLDivElement>;
    leftBaseProps?: HTMLProps<HTMLDivElement>;
    rightBaseProps?: HTMLProps<HTMLUListElement>;
};
/**
 * Main DynamicTable component props
 */
type DynamicTablePropsType<T> = {
    tableName?: string;
    topContent?: ReactNode;
    topContentOptions?: TopContentOptionsType;
    columns: ColumnType<NestedFieldPaths<T>>[];
    items: T[];
    keyAccessor?: NestedFieldPaths<T>;
    emptyContent?: ReactNode;
    isLoading?: boolean;
    loadingContent?: ReactNode;
    tBodyProps?: HTMLProps<HTMLTableSectionElement>;
    tHeadProps?: HTMLProps<HTMLTableSectionElement>;
    tHeadTrProps?: HTMLProps<HTMLTableRowElement>;
    tBodyTrProps?: HTMLProps<HTMLTableRowElement>;
    baseProps?: HTMLProps<HTMLDivElement>;
    tableBaseProps?: HTMLProps<HTMLDivElement>;
    tableProps?: HTMLProps<HTMLTableElement>;
    actions?: ActionsType[];
    actionColumName?: string;
    usePagination?: boolean;
    pagination?: PAGINATION_TYPE;
    id?: string;
};

declare const _default: <T extends Record<string, any>>({ items, columns, topContent, topContentOptions, usePagination, pagination, emptyContent, isLoading, loadingContent, tableName, tBodyTrProps, tHeadTrProps, tBodyProps, tHeadProps, baseProps, tableBaseProps, tableProps, id, }: DynamicTablePropsType<T>) => react_jsx_runtime.JSX.Element;

/**
 * TableTopContent component renders the top section of the table
 * Includes search input, add button, and optional additional components
 * Updated with better dark mode support and improved responsive design
 */
declare const TableTopContent: React$1.FC<TopContentOptionsType>;

type PaginationControllerProps = {
    pagination: PAGINATION_TYPE;
};
/**
 * PaginationController handles the pagination UI and logic
 * Displays current page, total pages, and navigation controls
 * Improved with dark mode support
 */
declare const PaginationController: React$1.FC<PaginationControllerProps>;

type ChipProps = {
    className?: string | ((item: any) => string);
    item: any;
    color?: string | ((item: any) => string);
    size?: "sm" | "md" | "lg" | number;
    style?: CSSProperties | ((item: any) => CSSProperties);
};
/**
 * Improved Chip component that works without Tailwind
 * Uses direct CSS styles for colors and sizes
 */
declare const Chip: React$1.FC<ChipProps>;

type ActionTdProps<T> = {
    column: ColumnType<keyof T & string>;
    item: any;
    colIndex: any;
    children: ReactNode;
    onClick?: () => void;
    adJustClass?: string;
};
/**
 * ActionTd is a specialized table cell component for action buttons
 * Used for edit, delete, and other action buttons
 * Improved with direct CSS styles instead of Tailwind classes
 */
declare const ActionTd: <T extends Record<string, any>>({ column, item, colIndex, children, onClick, adJustClass, }: ActionTdProps<T>) => react_jsx_runtime.JSX.Element;

type BaseProps = {
    children: ReactNode;
    baseProps?: HTMLProps<HTMLDivElement>;
    id?: string;
};
/**
 * Base container component for the dynamic table
 * Provides outer styling and structure
 * Updated with direct CSS styles instead of Tailwind
 */
declare const Base: React$1.FC<BaseProps>;

type LiProps = {
    children: ReactNode;
    onClick?: () => void;
    props?: HTMLProps<HTMLLIElement>;
    className?: string;
};
/**
 * Li component is a list item wrapper
 * Used primarily in dropdown menus for actions
 */
declare const Li: React$1.FC<LiProps>;

type LinkProps = {
    href: string;
    item: any;
    children: ReactNode;
    className?: string;
    target?: string;
    rel?: string;
    onClick?: (e: React$1.MouseEvent) => void;
};
/**
 * Universal Link component that works in both React and Next.js (including latest versions)
 * Auto-detects Next.js environment and uses the appropriate link component
 */
declare const Link: ({ item, href, children, className, target, rel, onClick, }: LinkProps) => react_jsx_runtime.JSX.Element;

type TableProps = {
    children: ReactNode;
    tableProps?: HTMLProps<HTMLTableElement>;
};
/**
 * Table component wraps the HTML table element
 * Applies base styling and passes through custom props
 * Updated with dark mode support
 */
declare const Table: React$1.FC<TableProps>;

type TableBaseProps = {
    children: ReactNode;
    tableBaseProps?: HTMLProps<HTMLDivElement>;
};
/**
 * TableBase is the container component for the table itself
 * Provides scrolling behavior and dimensions
 * Updated with dark mode support
 */
declare const TableBase: React$1.FC<TableBaseProps>;

type TbodyProps = {
    tBodyProps?: HTMLProps<HTMLTableSectionElement>;
    children: ReactNode;
};
/**
 * Tbody component wraps the HTML tbody element
 * Applies base styling and passes through custom props
 * Updated with dark mode support
 */
declare const Tbody: React$1.FC<TbodyProps>;

type TbodyTrProps = {
    tBodyTrProps?: HTMLProps<HTMLTableRowElement>;
    children: ReactNode;
};
/**
 * TbodyTr component wraps the HTML tr element within tbody
 * Handles alternate row coloring and applies custom props
 * Updated with dark mode support
 */
declare const TbodyTr: React$1.FC<TbodyTrProps>;

type TdProps<T> = {
    column: ColumnType<keyof T & string>;
    item: any;
    colIndex: any;
    children: ReactNode;
};
/**
 * Td component represents a standard table cell
 * Handles dynamic properties and styling based on column configuration
 * Updated with dark mode support
 */
declare const Td: <T extends Record<string, any>>({ column, item, colIndex, children, }: TdProps<T>) => react_jsx_runtime.JSX.Element;

type ThProps<T> = {
    column: ColumnType<keyof T & string>;
    colIndex: any;
    children: ReactNode;
};
/**
 * Th component represents a table header cell
 * Handles special styling for action columns and other column types
 * Updated with dark mode support
 */
declare const Th: <T extends Record<string, any>>({ column, colIndex, children, }: ThProps<T>) => react_jsx_runtime.JSX.Element;

type TheadProps = {
    tHeadProps?: HTMLProps<HTMLTableSectionElement>;
    children: ReactNode;
};
/**
 * Thead component wraps the HTML thead element
 * Applies base styling for the table header
 * Updated with dark mode support
 */
declare const Thead: React$1.FC<TheadProps>;

type TheadTrProps = {
    tHeadTrProps?: HTMLProps<HTMLTableRowElement>;
    children: ReactNode;
};
/**
 * TheadTr component wraps the HTML tr element within thead
 * Applies styling for the header row
 */
declare const TheadTr: React$1.FC<TheadTrProps>;

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

export { ActionTd, ActionsOptionsType, ActionsType, Base, Chip, ChipOptions, ColumnConditionsRenderType, ColumnConditionsType, ColumnType, _default as DynamicTable, DynamicTablePropsType, Li, Link, LinkOptionsType, NestedFieldPaths, OptionOptions, PAGINATION_TYPE, PaginationController, Table, TableBase, TableTopContent, Tbody, TbodyTr, Td, Th, Thead, TheadTr, TopContentAddButtonType, TopContentOptionsType, TopContentSearhInputType, cn };