ds-smart-ui/dist/src/components/DataDisplay/DataTable/DataTable.d.ts

Smart UI is a React component library that helps you build accessible and responsive web applications.

import { MRT_ColumnDef } from 'material-react-table';
import { ButtonColorTypes, ButtonVariantTypes } from '../../../types/button-types';

/**
 * DataTable component to display tabular data with various features.
 * It supports row selection, column virtualization, row virtualization, column pinning,
 * row numbers, row actions, and detail buttons.
 * @component
 * @template T - Type of the data rows.
 * @param {Object} props - Component properties.
 * @param {MRT_ColumnDef<T>[]} props.columns - Array of column definitions.
 * @param {T[]} props.rows - Array of data rows to display.
 * @param {boolean} [props.enableRowSelection=true] - Whether to enable row selection.
 * @param {boolean} [props.enableColumnVirtualization=false] - Whether to enable column virtualization.
 * @param {boolean} [props.enableRowVirtualization=false] - Whether to enable row virtualization.
 * @param {boolean} [props.enableColumnPinning=false] - Whether to enable column pinning.
 * @param {boolean} [props.enableRowNumber=false] - Whether to display row numbers.
 * @param {boolean} [props.enableRowActions=true] - Whether to enable row actions.
 * @param {string[]} [props.leftPinnedColumns=[]] - Array of column keys to pin on the left.
 * @param {string[]} [props.rightPinnedColumns=[]] - Array of column keys to pin on the right.
 * @param {string} [props.labelDetailButton="Detail"] - Label for the detail button.
 * @param {Object[]} [props.rowActionItems=[]] - Array of row action items with labels, click handlers, permissions, and optional conditions.
 * @param {function} [props.onDetailChange] - Callback function when detail button is clicked.
 * @param {boolean} [props.enableDetailButton=true] - Whether to enable the detail button.
 * @param {string} [props.id] - Optional ID for the data table.
 * @param {Object} rest - Additional properties to pass to the MaterialReactTable.
 * @returns {JSX.Element} The DataTable component.
 */
type DataTableProps<T extends Record<string, unknown>> = {
    columns: MRT_ColumnDef<T>[];
    rows: T[];
    enableRowSelection?: boolean;
    enableColumnVirtualization?: boolean;
    enableRowVirtualization?: boolean;
    enableColumnPinning?: boolean;
    enableRowNumber?: boolean;
    enableRowActions?: boolean;
    leftPinnedColumns?: string[];
    rightPinnedColumns?: string[];
    labelDetailButton?: string;
    rowActionItems?: {
        label: string;
        onClick: (rowData: T) => void;
        permission: boolean;
        condition?: (rowData: T) => boolean;
        variantMenu?: ButtonVariantTypes;
        colorMenu?: ButtonColorTypes;
        startIconMenu?: React.ReactNode;
        endIconMenu?: React.ReactNode;
        id?: string;
    }[];
    onDetailChange?: (rowData: T) => void;
    enableDetailButton?: boolean;
    id?: string;
    uniqueRowIdentifier?: keyof T;
} & Partial<Record<string, unknown>>;
declare const DataTable: <T extends Record<string, unknown>>({ columns, rows, enableRowSelection, enableColumnVirtualization, enableRowVirtualization, enableColumnPinning, enableRowNumber, enableRowActions, leftPinnedColumns, rightPinnedColumns, rowActionItems, enableDetailButton, labelDetailButton, onDetailChange, id, uniqueRowIdentifier, ...rest }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
export default DataTable;