next-fast-table/dist/index.d.ts

A super-fast form building solution for full-stack developers, build your data forms in one minute.

import { PaginationState, ColumnFiltersState, SortingState } from '@tanstack/react-table';
import React from 'react';

type DataWithID<T = Record<string, any>> = {
    id: number | string;
} & Partial<T>;
type DataOnlyId<T = number | string> = {
    id: T;
};
type FetchParams = {
    pagination: PaginationState;
    columnFilters: ColumnFiltersState;
    sorting: SortingState;
};
type DeleteParams<T> = DataOnlyId<T> | DataOnlyId<T>[];
type UpdateParams<T = Record<string, any>> = DataWithID<T>;
type CreateParams<T = Record<string, any>> = DataWithID<T>;
/**
 * Table configuration options.
 */
interface TableConfig {
    /**
     * The name of the table, used to generate the key for tanstack-query. Defaults to 'next-table'.
     */
    name?: string;
    /**
     * The columns configuration for the table.
     */
    columns: any;
    /**
     * Function to fetch data for the table.
     * @param args - The fetch arguments including pagination, column filters, and sorting state.
     * @returns A promise that resolves with the total number of items and the list of data with ID.
     * @example
     * async function fetchData({ pagination, sorting, columnFilters }) {
     *   const data = await fetchDataFromAPI({
     *     pagination,
     *     sorting,
     *     columnFilters,
     *   });
     *   const total = await fetchTotalCount();
     *   return {
     *     list: data,
     *     total,
     *   };
     * }
     */
    onFetch: (args: FetchParams) => Promise<{
        total: number;
        list: DataWithID[];
    }>;
    /**
     * Function to delete data.
     * @param data - The data to be deleted, either a single ID or an array of IDs.
     * @returns A promise that resolves when the deletion is complete.
     * @example
     * async function deleteData(data) {
     *   await deleteDataFromAPI(data);
     * }
     */
    onDelete?: (data: any) => Promise<void>;
    /**
     * Function to create new data.
     * @param data - The data to be created.
     * @returns A promise that resolves when the creation is complete.
     * @example
     * async function createData(data) {
     *   const newData = await createDataInAPI(data);
     *   return newData;
     * }
     */
    onCreate?: (data: any) => Promise<void>;
    /**
     * Function to update existing data.
     * @param data - The data to be updated. Only the ID and fields to be updated will be sent.
     * @returns A promise that resolves when the update is complete.
     * @example
     * async function updateData(data) {
     *   const updatedData = await updateDataInAPI(data);
     *   return updatedData;
     * }
     */
    onUpdate?: (data: any) => Promise<void>;
}

/**
 * Configuration options for helper functions.
 */
interface HelperConfig {
    /**
     * Configuration for the input state.
     */
    input?: {
        /**
         * Whether the input is disabled in edit mode, including both creation and editing.
         */
        disabled?: boolean;
        /**
         * Whether the input is required in edit mode, participating in form validation.
         */
        required?: boolean;
    };
    /**
     * Configuration for the display state.
     */
    list?: {
        /**
         * Whether the column is hidden by default. If true, it will not be displayed by default, but can be shown through column settings.
         */
        hidden?: boolean;
    };
    /**
     * The label or alias for the column.
     */
    label?: string;
    /**
     * Whether hiding is allowed. If false, the hide button will not be displayed.
     */
    enableHiding?: boolean;
    /**
     * Whether sorting is allowed. If false, the sort button will not be displayed.
     */
    enableSorting?: boolean;
    /**
     * Whether the column participates in column filtering. If false, it will not be displayed in the column filter.
     */
    enableColumnFilter?: boolean;
    /**
     * Enumeration values, only effective when using `field.enum`.
     */
    enum?: string[];
    /**
     * Custom render function for custom rendering in display state.
     * @param cell - The cell value.
     * @param row - The row data.
     * @returns A JSX element or string for rendering.
     */
    render?: ({ cell, row }: {
        cell: any;
        row: any;
    }) => JSX.Element | string;
}
declare const Fields: {
    string: (key: string, config?: HelperConfig) => {
        meta: {
            type: string;
            input: {
                disabled: boolean;
                required: boolean;
            };
            list: {
                hidden: boolean;
            };
            enum: string[];
        };
        accessorKey: string;
        header: string;
        enableHiding: boolean;
        enableSorting: boolean;
        enableColumnFilter: boolean;
        cell: ({ cell, row }: {
            cell: any;
            row: any;
        }) => string | React.JSX.Element;
    };
    number: (key: string, config?: HelperConfig) => {
        meta: {
            type: string;
            input: {
                disabled: boolean;
                required: boolean;
            };
            list: {
                hidden: boolean;
            };
            enum: string[];
        };
        accessorKey: string;
        header: string;
        enableHiding: boolean;
        enableSorting: boolean;
        enableColumnFilter: boolean;
        cell: ({ cell, row }: {
            cell: any;
            row: any;
        }) => string | React.JSX.Element;
    };
    boolean: (key: string, config?: HelperConfig) => {
        meta: {
            type: string;
            input: {
                disabled: boolean;
                required: boolean;
            };
            list: {
                hidden: boolean;
            };
            enum: string[];
        };
        accessorKey: string;
        header: string;
        enableHiding: boolean;
        enableSorting: boolean;
        enableColumnFilter: boolean;
        cell: ({ cell, row }: {
            cell: any;
            row: any;
        }) => string | React.JSX.Element;
    };
    date: (key: string, config?: HelperConfig) => {
        meta: {
            type: string;
            input: {
                disabled: boolean;
                required: boolean;
            };
            list: {
                hidden: boolean;
            };
            enum: string[];
        };
        accessorKey: string;
        header: string;
        enableHiding: boolean;
        enableSorting: boolean;
        enableColumnFilter: boolean;
        cell: ({ cell, row }: {
            cell: any;
            row: any;
        }) => string | React.JSX.Element;
    };
    array: (key: string, config?: HelperConfig) => {
        meta: {
            type: string;
            input: {
                disabled: boolean;
                required: boolean;
            };
            list: {
                hidden: boolean;
            };
            enum: string[];
        };
        accessorKey: string;
        header: string;
        enableHiding: boolean;
        enableSorting: boolean;
        enableColumnFilter: boolean;
        cell: ({ cell, row }: {
            cell: any;
            row: any;
        }) => string | React.JSX.Element;
    };
    json: (key: string, config?: HelperConfig) => {
        meta: {
            type: string;
            input: {
                disabled: boolean;
                required: boolean;
            };
            list: {
                hidden: boolean;
            };
            enum: string[];
        };
        accessorKey: string;
        header: string;
        enableHiding: boolean;
        enableSorting: boolean;
        enableColumnFilter: boolean;
        cell: ({ cell, row }: {
            cell: any;
            row: any;
        }) => string | React.JSX.Element;
    };
    longtext: (key: string, config?: HelperConfig) => {
        meta: {
            type: string;
            input: {
                disabled: boolean;
                required: boolean;
            };
            list: {
                hidden: boolean;
            };
            enum: string[];
        };
        accessorKey: string;
        header: string;
        enableHiding: boolean;
        enableSorting: boolean;
        enableColumnFilter: boolean;
        cell: ({ cell, row }: {
            cell: any;
            row: any;
        }) => string | React.JSX.Element;
    };
    enum: (key: string, config?: HelperConfig) => {
        meta: {
            type: string;
            input: {
                disabled: boolean;
                required: boolean;
            };
            list: {
                hidden: boolean;
            };
            enum: string[];
        };
        accessorKey: string;
        header: string;
        enableHiding: boolean;
        enableSorting: boolean;
        enableColumnFilter: boolean;
        cell: ({ cell, row }: {
            cell: any;
            row: any;
        }) => string | React.JSX.Element;
    };
    ua: (key: string, config?: HelperConfig) => {
        meta: {
            type: string;
            input: {
                disabled: boolean;
                required: boolean;
            };
            list: {
                hidden: boolean;
            };
            enum: string[];
        };
        accessorKey: string;
        header: string;
        enableHiding: boolean;
        enableSorting: boolean;
        enableColumnFilter: boolean;
        cell: ({ cell, row }: {
            cell: any;
            row: any;
        }) => string | React.JSX.Element;
    };
    image: (key: string, config?: HelperConfig) => {
        meta: {
            type: string;
            input: {
                disabled: boolean;
                required: boolean;
            };
            list: {
                hidden: boolean;
            };
            enum: string[];
        };
        accessorKey: string;
        header: string;
        enableHiding: boolean;
        enableSorting: boolean;
        enableColumnFilter: boolean;
        cell: ({ cell, row }: {
            cell: any;
            row: any;
        }) => string | React.JSX.Element;
    };
    email: (key: string, config?: HelperConfig) => {
        meta: {
            type: string;
            input: {
                disabled: boolean;
                required: boolean;
            };
            list: {
                hidden: boolean;
            };
            enum: string[];
        };
        accessorKey: string;
        header: string;
        enableHiding: boolean;
        enableSorting: boolean;
        enableColumnFilter: boolean;
        cell: ({ cell, row }: {
            cell: any;
            row: any;
        }) => string | React.JSX.Element;
    };
    tag: (key: string, config?: HelperConfig) => {
        meta: {
            type: string;
            input: {
                disabled: boolean;
                required: boolean;
            };
            list: {
                hidden: boolean;
            };
            enum: string[];
        };
        accessorKey: string;
        header: string;
        enableHiding: boolean;
        enableSorting: boolean;
        enableColumnFilter: boolean;
        cell: ({ cell, row }: {
            cell: any;
            row: any;
        }) => string | React.JSX.Element;
    };
    link: (key: string, config?: HelperConfig) => {
        meta: {
            type: string;
            input: {
                disabled: boolean;
                required: boolean;
            };
            list: {
                hidden: boolean;
            };
            enum: string[];
        };
        accessorKey: string;
        header: string;
        enableHiding: boolean;
        enableSorting: boolean;
        enableColumnFilter: boolean;
        cell: ({ cell, row }: {
            cell: any;
            row: any;
        }) => string | React.JSX.Element;
    };
    ip: (key: string, config?: HelperConfig) => {
        meta: {
            type: string;
            input: {
                disabled: boolean;
                required: boolean;
            };
            list: {
                hidden: boolean;
            };
            enum: string[];
        };
        accessorKey: string;
        header: string;
        enableHiding: boolean;
        enableSorting: boolean;
        enableColumnFilter: boolean;
        cell: ({ cell, row }: {
            cell: any;
            row: any;
        }) => string | React.JSX.Element;
    };
};

declare function NextFastTable(props: TableConfig): React.JSX.Element;

export { CreateParams, DeleteParams, FetchParams, Fields, NextFastTable, UpdateParams };