@stanfordspezi/spezi-web-design-system/dist/src/components/DataTable/DataTable.d.ts

Stanford Biodesign Digital Health Spezi Web Design System

import { Row, Table as TableType } from '@tanstack/table-core';
import { ReactNode } from 'react';
import { AsyncProps, FullEmptyProps } from '../Async/Async';
import { DataTableTableViewSpecificProps } from './DataTableTableView';
import { UseDataTableProps } from './DataTable.utils';
export type DataTableViewProps<Data> = {
    table: TableType<Data>;
    rows: Array<Row<Data>>;
} & Pick<DataTableProps<Data>, "entityName">;
type ViewRenderProp<Data> = (props: DataTableViewProps<Data>) => ReactNode;
export interface DataTableProps<Data> extends UseDataTableProps<Data>, Pick<AsyncProps, "error" | "loading"> {
    /**
     * Additional CSS classes to apply to the DataTable container.
     */
    className?: string;
    /**
     * Name of the presented data entity.
     * Used inside empty states, placeholders.
     * Provide pluralized and lowercased.
     * @example "users"
     */
    entityName?: string;
    /**
     * Slot or render function to add new elements to the DataTable's header.
     * Useful for creating custom filter or action buttons.
     *
     * @example
     * ```tsx
     * // Using ReactNode
     * <DataTable header={<Button>Add User</Button>} />
     * ```
     *
     * @example
     * ```tsx
     * // Using render function
     * <DataTable
     *   header={({ table }) => (
     *     <Button onClick={() => table.resetGlobalFilter()}>Clear Filters</Button>
     *   )}
     * />
     * ```
     */
    header?: ReactNode | ViewRenderProp<Data>;
    /**
     * Render props pattern to define a different type of views than standard TableView.
     * Useful when creating list-like or grid-like views
     * that still need to support pagination, filtering, and sorting features of DataTable.
     *
     * @example
     * ```tsx
     * <DataTable>
     *   {({ rows }) => (
     *     <div>
     *       {rows.map((row) => {
     *         const person = row.original;
     *         return <div key={row.id}>{person.name}</div>;
     *       })}
     *     </div>
     *   )}
     * </DataTable>
     * ```
     */
    children?: ViewRenderProp<Data>;
    /**
     * Renders a border around container.
     * @default true
     */
    bordered?: boolean;
    /**
     * Hides DataTable features, like header or pagination if not required.
     * Useful for simpler views where advanced features are not needed.
     * @default false
     */
    minimal?: boolean;
    /**
     * Properties that are specific to the Table view of DataTable.
     * These properties are only used when the default table view is rendered.
     */
    tableView?: DataTableTableViewSpecificProps<Data>;
    /**
     * Custom empty state handler. It's an optional property unless custom behavior is needed.
     * Can be a boolean to show/hide the default empty state, or an object to customize it.
     *
     * @example
     * ```tsx
     * // customized error message
     * <DataTable empty={{ children: "Sorry, no users found" }} />
     * ```
     *
     * @example
     * ```tsx
     * // disable empty state
     * <DataTable empty={false} />
     * ```
     */
    empty?: boolean | Partial<FullEmptyProps>;
}
/**
 * A flexible DataTable component that supports pagination, filtering, and sorting.
 *
 * This component heavily relies most of it's properties and API on [@tanstack/react-table](https://www.npmjs.com/package/@tanstack/react-table).
 * Please refer to the [docs](https://tanstack.com/table/v8/docs/introduction) for more details and advanced usage.
 *
 * Features:
 * - Global text search filtering
 * - Column-based filtering and sorting
 * - Pagination with configurable page size
 * - Customizable empty states and loading states
 * - Multiple view modes - table by default, any other by customizing props
 * - Extensible header
 *
 * @template Data - The type of data items displayed in the table
 *
 * @example
 * ```tsx
 * // Basic usage with array of users
 * const userColumns = createColumnHelper<User>()
 * <DataTable
 *   data={users}
 *   columns={[
 *     userColumns.accessor('name', { header: 'Name' }),
 *     userColumns.accessor('email', { header: 'Email' }),
 *     userColumns.accessor('role', { header: 'Role' })
 *   ]}
 *   entityName="users"
 *   pageSize={10}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // With custom empty state and loading
 * const productColumns = createColumnHelper<Product>()
 * <DataTable
 *   data={products}
 *   columns={[
 *     productColumns.accessor('name', { header: 'Product Name' }),
 *     productColumns.accessor('price', { header: 'Price' }),
 *     productColumns.accessor('category', { header: 'Category' })
 *   ]}
 *   entityName="products"
 *   loading={isLoading}
 *   error={error}
 *   empty={{ children: "No products found" }}
 * />
 * ```
 *
 *
 * @example
 * ```tsx
 * // Completely custom view
 * <DataTable<Person>
 *   columns={peopleColumns}
 *   data={peopleData}
 *   entityName="users"
 *   className="m-5"
 * >
 *   {({ rows }) => (
 *     <div>
 *       {rows.map((row) => {
 *         const person = row.original;
 *         return (
 *           <div key={row.id}>
 *             <h4>{person.name}</h4>
 *             <span>
 *               {person.age} years old
 *             </span>
 *           </div>
 *         );
 *       })}
 *     </div>
 *   )}
 * </DataTable>
 * ```
 */
export declare const DataTable: <Data>({ className, columns, entityName, data, pageSize, header, children, bordered, minimal, tableView, loading, error, empty, ...props }: DataTableProps<Data>) => import("react").JSX.Element;
export {};