react-dynamiq-table/dist/index.d.ts

this is react dynamic table help you to avoide repeating yourself. it's very easy to customize the style and access your data dynamically without mapping

import * as react_jsx_runtime from 'react/jsx-runtime';
import { ReactNode, HTMLProps } from 'react';

type OptionOptions = {
    data?: string[];
    onChange?: (value: string) => void;
    apiLink?: string;
    onRes?: (value: any) => void;
    component?: (data: any) => ReactNode;
    onCatch?: (error?: any) => void;
};
type ActionsType = {
    components?: (data: any) => ReactNode;
};
type LinkOptionsType = {
    href?: string;
};
type ChipOptions = {
    className: string;
};
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;
};
type ColumnConditionsType<T extends string> = {
    condtion: boolean | {
        compare: string[];
    };
    redner: ColumnConditionsRenderType<T>;
};
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>;
    };
};
type TopContentAddButtonType = {
    title?: string;
    startContent?: ReactNode;
    endContent?: ReactNode;
};
type TopContentSearhInputType = {};
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;
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>;
};
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;
};

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

export { DynamicTable };