react-antd-admin-panel/dist/list/index.d.ts

Modern TypeScript-first React admin panel builder with Ant Design 6

import React from 'react';
import { BaseBuilder } from '../base/BaseBuilder';
import type { ComponentConfig } from '../types';
import { Get } from '../http/Get';
export interface ListColumnConfig<T = any> {
    key: string;
    title: string;
    dataIndex?: string | string[];
    width?: number | string;
    fixed?: 'left' | 'right';
    align?: 'left' | 'center' | 'right';
    sorter?: boolean | ((a: T, b: T) => number);
    filters?: {
        text: string;
        value: any;
    }[];
    render?: (value: any, record: T, index: number) => React.ReactNode;
    ellipsis?: boolean;
    hidden?: boolean;
    searchable?: boolean;
}
export interface ListActionConfig<T = any> {
    key: string;
    label: string;
    icon?: React.ReactNode;
    onClick: (record: T, index: number) => void;
    danger?: boolean;
    disabled?: boolean | ((record: T) => boolean);
    confirm?: string;
    tooltip?: string;
}
export interface BulkActionConfig<T = any> {
    key: string;
    label: string;
    icon?: React.ReactNode;
    onClick: (selectedRows: T[], selectedKeys: React.Key[]) => void | Promise<void>;
    danger?: boolean;
    confirm?: string;
}
export interface ListHeaderConfig {
    title?: string;
    showSearch?: boolean;
    searchPlaceholder?: string;
    onSearch?: (value: string) => void;
    showCreate?: boolean;
    createLabel?: string;
    onCreate?: () => void;
    showRefresh?: boolean;
    onRefresh?: () => void;
    extra?: React.ReactNode;
}
export interface ListConfig<T = any> extends ComponentConfig {
    columns?: ListColumnConfig<T>[];
    actions?: ListActionConfig<T>[];
    bulkActions?: BulkActionConfig<T>[];
    dataSource?: T[];
    rowKey?: string | ((record: T) => string);
    loading?: boolean;
    pagination?: false | {
        pageSize?: number;
        current?: number;
        total?: number;
        showSizeChanger?: boolean;
        showQuickJumper?: boolean;
        showTotal?: (total: number, range: [number, number]) => React.ReactNode;
        onChange?: (page: number, pageSize: number) => void;
    };
    size?: 'small' | 'middle' | 'large';
    bordered?: boolean;
    showHeader?: boolean;
    sticky?: boolean;
    scroll?: {
        x?: number | string;
        y?: number | string;
    };
    rowSelection?: {
        type?: 'checkbox' | 'radio';
        selectedRowKeys?: React.Key[];
        onChange?: (selectedRowKeys: React.Key[], selectedRows: T[]) => void;
    };
    expandable?: {
        expandedRowRender?: (record: T) => React.ReactNode;
        rowExpandable?: (record: T) => boolean;
    };
    onRow?: (record: T, index?: number) => React.HTMLAttributes<HTMLElement>;
    header?: ListHeaderConfig;
    get?: Get<T[]>;
    emptyText?: string;
    virtual?: boolean;
    virtualHeight?: number;
    virtualScrollX?: number | string;
}
/**
 * List Builder - Table/List component with builder pattern
 * Wrapper for Ant Design Table with fluent API
 *
 * @example
 * // Basic usage
 * const userList = new List<User>()
 *   .rowKey('id')
 *   .column('name', 'Name')
 *   .column('email', 'Email')
 *   .tagColumn('role', 'Role', { admin: 'red', user: 'blue' })
 *   .action('edit', 'Edit', (record) => navigate(`/users/${record.id}`))
 *   .pagination({ pageSize: 10 })
 *   .dataSource(users);
 *
 * @example
 * // With header controls and bulk actions
 * const userList = new List<User>()
 *   .rowKey('id')
 *   .header({
 *     title: 'Users',
 *     showSearch: true,
 *     onSearch: (q) => setSearch(q),
 *     showCreate: true,
 *     onCreate: () => navigate('/users/new'),
 *     showRefresh: true,
 *     onRefresh: () => refresh(),
 *   })
 *   .selectable('checkbox')
 *   .bulkAction('delete', 'Delete Selected', (rows) => deleteUsers(rows), { danger: true, confirm: 'Delete?' })
 *   .column('name', 'Name')
 *   .dataSource(users);
 */
export declare class List<T extends object = any> extends BaseBuilder<ListConfig<T>> {
    private _selectedRowKeys;
    constructor();
    /**
     * Set the data source
     */
    dataSource(data: T[]): this;
    /**
     * Set the row key field or function
     */
    rowKey(key: string | ((record: T) => string)): this;
    /**
     * Add a column to the table
     * Supports multiple signatures:
     * - column(key, title) - basic column
     * - column(key, title, config) - column with options
     * - column(key, title, render) - column with custom render
     * - column(key, title, render, config) - column with render and options
     */
    column(key: string, title: string, renderOrConfig?: ((value: any, record: T, index: number) => React.ReactNode) | Partial<ListColumnConfig<T>>, configIfRender?: Partial<ListColumnConfig<T>>): this;
    /**
     * Add an avatar column
     */
    avatarColumn(key: string, title?: string, size?: number): this;
    /**
     * Add a tag column
     */
    tagColumn(key: string, title: string, colorMap?: Record<string, string>, options?: Omit<ListColumnConfig<T>, 'key' | 'title' | 'dataIndex' | 'render'>): this;
    /**
     * Add a date column with formatting
     */
    dateColumn(key: string, title: string, format?: 'date' | 'datetime' | 'relative', options?: Omit<ListColumnConfig<T>, 'key' | 'title' | 'dataIndex' | 'render'>): this;
    /**
     * Add a boolean column with Yes/No or custom labels
     */
    booleanColumn(key: string, title: string, options?: {
        trueLabel?: string;
        falseLabel?: string;
        trueColor?: string;
        falseColor?: string;
    }): this;
    /**
     * Add an action button
     */
    action(key: string, label: string, onClick: (record: T, index: number) => void, options?: Partial<Omit<ListActionConfig<T>, 'key' | 'label' | 'onClick'>>): this;
    /**
     * Set loading state
     */
    loading(value?: boolean): this;
    /**
     * Configure pagination
     */
    pagination(config: false | ListConfig<T>['pagination']): this;
    /**
     * Set table size
     */
    size(value: 'small' | 'middle' | 'large'): this;
    /**
     * Enable bordered style
     */
    bordered(value?: boolean): this;
    /**
     * Show/hide header
     */
    showHeader(value?: boolean): this;
    /**
     * Enable sticky header
     */
    sticky(value?: boolean): this;
    /**
     * Set scroll dimensions
     */
    scroll(x?: number | string, y?: number | string): this;
    /**
     * Enable row selection
     */
    rowSelection(config: ListConfig<T>['rowSelection']): this;
    /**
     * Enable row expansion
     */
    expandable(config: ListConfig<T>['expandable']): this;
    /**
     * Enable row expansion with a render function
     */
    expandableRow(render: (record: T) => React.ReactNode, isExpandable?: (record: T) => boolean): this;
    /**
     * Set row event handlers
     */
    onRow(handler: (record: T, index?: number) => React.HTMLAttributes<HTMLElement>): this;
    /**
     * Configure header controls (search, create, refresh, etc.)
     */
    header(config: ListHeaderConfig): this;
    /**
     * Enable simple row selection (state is managed by ListComponent)
     */
    selectable(type?: 'checkbox' | 'radio'): this;
    /**
     * Add a bulk action (for selected rows)
     */
    bulkAction(key: string, label: string, onClick: (selectedRows: T[], selectedKeys: React.Key[]) => void | Promise<void>, options?: Partial<Omit<BulkActionConfig<T>, 'key' | 'label' | 'onClick'>>): this;
    /**
     * Set a Get request for data fetching
     */
    get(request: Get<T[]>): this;
    /**
     * Set empty state text
     */
    emptyText(text: string): this;
    /**
     * Enable virtual scrolling for large datasets
     * @param height - The height of the virtual scroll container (default 400)
     * @param scrollX - The horizontal scroll width (default 'max-content'). Set to calculated width for best performance.
     */
    virtual(height?: number, scrollX?: number | string): this;
    /**
     * Get the current configuration (for advanced use cases)
     */
    getConfig(): ListConfig<T>;
    /**
     * Render the table component
     */
    render(): React.ReactNode;
}
//# sourceMappingURL=index.d.ts.map