@juspay/blend-design-system 0.0.1

package/dist/components/DataTable/TableCell/types.d.ts

@@ -0,0 +1,12 @@
+import { ColumnDefinition } from '../types';
+export type TableCellProps<T extends Record<string, unknown>> = {
+    column: ColumnDefinition<T>;
+    row: T;
+    rowIndex: number;
+    isEditing: boolean;
+    currentValue: unknown;
+    width: React.CSSProperties;
+    frozenStyles?: React.CSSProperties;
+    onFieldChange: (value: unknown) => void;
+    getDisplayValue?: (value: unknown, column: ColumnDefinition<T>) => unknown;
+};

package/dist/components/DataTable/TableFooter/index.d.ts

@@ -0,0 +1,3 @@
+import { TableFooterProps } from './types';
+declare const TableFooter: import('react').ForwardRefExoticComponent<TableFooterProps & import('react').RefAttributes<HTMLDivElement>>;
+export default TableFooter;

package/dist/components/DataTable/TableFooter/types.d.ts

@@ -0,0 +1,10 @@
+import { PaginationConfig } from '../types';
+export type TableFooterProps = {
+    pagination?: PaginationConfig;
+    currentPage: number;
+    pageSize: number;
+    totalRows: number;
+    isLoading?: boolean;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+};

package/dist/components/DataTable/TableHeader/FilterComponents.d.ts

@@ -0,0 +1,59 @@
+import { default as React } from 'react';
+import { ColumnDefinition } from '../types';
+import { TableTokenType } from '../dataTable.tokens';
+import { SortHandlers, FilterHandlers, FilterState, ColumnFilterHandler } from './handlers';
+type FilterComponentsProps = {
+    column: ColumnDefinition<Record<string, unknown>>;
+    data?: Record<string, unknown>[];
+    tableToken: TableTokenType;
+    sortHandlers: SortHandlers;
+    filterHandlers: FilterHandlers;
+    filterState: FilterState;
+    onColumnFilter?: ColumnFilterHandler;
+    onPopoverClose?: () => void;
+};
+export declare const SortOptions: React.FC<{
+    fieldKey: string;
+    tableToken: TableTokenType;
+    sortHandlers: SortHandlers;
+}>;
+export declare const DropdownSearchSection: React.FC<{
+    column: ColumnDefinition<Record<string, unknown>>;
+    fieldKey: string;
+    tableToken: TableTokenType;
+    filterHandlers: FilterHandlers;
+    filterState: FilterState;
+}>;
+export declare const Separator: React.FC<{
+    tableToken: TableTokenType;
+}>;
+export declare const SingleSelectItems: React.FC<{
+    column: ColumnDefinition<Record<string, unknown>>;
+    fieldKey: string;
+    tableToken: TableTokenType;
+    filterHandlers: FilterHandlers;
+    filterState: FilterState;
+    data?: Record<string, unknown>[];
+    onColumnFilter?: ColumnFilterHandler;
+    onPopoverClose?: () => void;
+}>;
+export declare const MultiSelectItems: React.FC<{
+    column: ColumnDefinition<Record<string, unknown>>;
+    fieldKey: string;
+    tableToken: TableTokenType;
+    filterHandlers: FilterHandlers;
+    filterState: FilterState;
+    data?: Record<string, unknown>[];
+    onColumnFilter?: ColumnFilterHandler;
+}>;
+export declare const SliderFilter: React.FC<{
+    column: ColumnDefinition<Record<string, unknown>>;
+    fieldKey: string;
+    tableToken: TableTokenType;
+    filterHandlers: FilterHandlers;
+    filterState: FilterState;
+    data?: Record<string, unknown>[];
+    onColumnFilter?: ColumnFilterHandler;
+}>;
+export declare const ColumnFilter: React.FC<FilterComponentsProps>;
+export {};

package/dist/components/DataTable/TableHeader/handlers.d.ts

@@ -0,0 +1,28 @@
+import { SortDirection, FilterType, ColumnDefinition } from '../types';
+export type SortState = {
+    currentSortField: string | null;
+    currentSortDirection: SortDirection;
+};
+export type FilterState = {
+    columnSearchValues: Record<string, string>;
+    columnSelectedValues: Record<string, string[] | {
+        min: number;
+        max: number;
+    }>;
+};
+export type ColumnFilterHandler = (field: string, filterType: FilterType, value: string | string[] | {
+    min: number;
+    max: number;
+}, operator?: 'endsWith' | 'startsWith' | 'equals' | 'contains' | 'gt' | 'lt' | 'gte' | 'lte' | 'range') => void;
+export type SortHandlers = {
+    handleSort: (field: string) => void;
+    handleSortAscending: (field: string) => void;
+    handleSortDescending: (field: string) => void;
+};
+export type FilterHandlers = {
+    handleSearchChange: (fieldKey: string, value: string) => void;
+    handleSelectFilter: (column: ColumnDefinition<Record<string, unknown>>, fieldKey: string, value: string, onColumnFilter?: ColumnFilterHandler) => void;
+    handleMultiSelectFilter: (column: ColumnDefinition<Record<string, unknown>>, fieldKey: string, value: string, onColumnFilter?: ColumnFilterHandler) => void;
+};
+export declare const createSortHandlers: (sortState: SortState, setSortState: React.Dispatch<React.SetStateAction<SortState>>, onSort: (field: keyof Record<string, unknown>) => void) => SortHandlers;
+export declare const createFilterHandlers: (setFilterState: React.Dispatch<React.SetStateAction<FilterState>>) => FilterHandlers;

package/dist/components/DataTable/TableHeader/index.d.ts

@@ -0,0 +1,3 @@
+import { TableHeaderProps } from './types';
+declare const TableHeader: import('react').ForwardRefExoticComponent<TableHeaderProps<Record<string, unknown>> & import('react').RefAttributes<HTMLTableSectionElement>>;
+export default TableHeader;

package/dist/components/DataTable/TableHeader/types.d.ts

@@ -0,0 +1,21 @@
+import { ColumnDefinition, FilterType } from '../types';
+export type TableHeaderProps<T extends Record<string, unknown>> = {
+    visibleColumns: ColumnDefinition<T>[];
+    initialColumns: ColumnDefinition<T>[];
+    selectAll: boolean | 'indeterminate';
+    enableInlineEdit?: boolean;
+    enableColumnManager?: boolean;
+    enableRowExpansion?: boolean;
+    enableRowSelection?: boolean;
+    data?: T[];
+    columnFreeze?: number;
+    onSort: (field: keyof T) => void;
+    onSelectAll: (checked: boolean | 'indeterminate') => void;
+    onColumnChange: (columns: ColumnDefinition<T>[]) => void;
+    onColumnFilter?: (field: string, type: FilterType, value: string | string[] | {
+        min: number;
+        max: number;
+    }, operator?: 'equals' | 'contains' | 'startsWith' | 'endsWith' | 'gt' | 'lt' | 'gte' | 'lte' | 'range') => void;
+    onHeaderChange?: (field: keyof T, newHeader: string) => void;
+    getColumnWidth: (column: ColumnDefinition<T>, index: number) => React.CSSProperties;
+};

package/dist/components/DataTable/TableHeader/utils.d.ts

@@ -0,0 +1,29 @@
+import { ColumnDefinition } from '../types';
+import { SelectMenuGroupType } from '../../Select/types';
+import { MultiSelectMenuGroupType } from '../../MultiSelect/types';
+export declare const getFilterOptions: (column: ColumnDefinition<Record<string, unknown>>, data?: Record<string, unknown>[]) => import('..').FilterOption[];
+export declare const getSelectMenuItems: (column: ColumnDefinition<Record<string, unknown>>, data?: Record<string, unknown>[]) => SelectMenuGroupType[];
+export declare const getMultiSelectMenuItems: (column: ColumnDefinition<Record<string, unknown>>, data?: Record<string, unknown>[]) => MultiSelectMenuGroupType[];
+/**
+ * Filters dropdown menu items based on search text
+ * This is used to filter the visible options in select/multiselect dropdowns
+ * NOT for applying column filters to data
+ */
+export declare const filterItemsBySearch: (items: Array<{
+    label: string;
+    value: string;
+}>, searchValue: string) => Array<{
+    label: string;
+    value: string;
+}>;
+export declare const getPopoverAlignment: (index: number, totalColumns: number) => "start" | "center" | "end";
+export declare const getFrozenColumnStyles: (index: number, columnFreeze: number, enableRowExpansion: boolean, enableRowSelection: boolean, visibleColumns: ColumnDefinition<Record<string, unknown>>[], getColumnWidth: (column: ColumnDefinition<Record<string, unknown>>, index: number) => React.CSSProperties, backgroundColor: string) => {
+    padding: string;
+} | {
+    borderRight?: string | undefined;
+    position: "sticky";
+    left: string;
+    zIndex: number;
+    backgroundColor: string;
+    padding: string;
+};

package/dist/components/DataTable/columnTypes.d.ts

@@ -0,0 +1,87 @@
+import { FilterType, ColumnType } from './types';
+export type ColumnFilterOption = {
+    id: string;
+    label: string;
+    value: string;
+};
+export type DropdownData = {
+    options: Array<{
+        id: string;
+        label: string;
+        value: unknown;
+    }>;
+    selectedValue?: unknown;
+    placeholder?: string;
+};
+export type AvatarData = {
+    label: string;
+    sublabel?: string;
+    imageUrl?: string;
+    initials?: string;
+};
+export type TagData = {
+    text: string;
+    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral';
+    variant?: 'solid' | 'subtle' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+};
+export type SelectData = {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+};
+export type MultiSelectData = {
+    values: string[];
+    labels?: string[];
+};
+export type DateData = {
+    date: Date | string;
+    format?: string;
+};
+export type DateRangeData = {
+    startDate: Date | string;
+    endDate: Date | string;
+    format?: string;
+};
+export type ColumnDataTypeMap = {
+    [ColumnType.TEXT]: string | number;
+    [ColumnType.NUMBER]: number;
+    [ColumnType.SELECT]: SelectData | string;
+    [ColumnType.MULTISELECT]: MultiSelectData | string[];
+    [ColumnType.DATE]: DateData | Date | string;
+    [ColumnType.DATE_RANGE]: DateRangeData;
+    [ColumnType.AVATAR]: AvatarData;
+    [ColumnType.TAG]: TagData;
+    [ColumnType.SLIDER]: number;
+    [ColumnType.CUSTOM]: unknown;
+    [ColumnType.PROGRESS]: number;
+    [ColumnType.DROPDOWN]: DropdownData;
+    [ColumnType.REACT_ELEMENT]: unknown;
+};
+export type GetColumnDataType<T extends ColumnType> = ColumnDataTypeMap[T];
+export declare const validateColumnData: {
+    text: (data: unknown) => data is string | number;
+    number: (data: unknown) => data is number;
+    select: (data: unknown) => data is SelectData | string;
+    multiselect: (data: unknown) => data is MultiSelectData | string[];
+    date: (data: unknown) => data is DateData | Date | string;
+    date_range: (data: unknown) => data is DateRangeData;
+    avatar: (data: unknown) => data is AvatarData;
+    tag: (data: unknown) => data is TagData;
+    slider: (data: unknown) => data is number;
+    custom: (_data: unknown) => _data is unknown;
+    progress: (data: unknown) => data is number;
+    dropdown: (data: unknown) => data is DropdownData;
+    react_element: (_data: unknown) => _data is unknown;
+};
+export type ColumnTypeConfig = {
+    type: ColumnType;
+    filterType: FilterType;
+    filterOptions?: ColumnFilterOption[];
+    supportsSorting: boolean;
+    supportsFiltering: boolean;
+    enableSearch?: boolean;
+    filterComponent?: 'search' | 'select' | 'multiselect' | 'dateRange' | 'numberRange' | 'slider';
+};
+export declare const getColumnTypeConfig: (type: ColumnType) => ColumnTypeConfig;
+export declare const getExpectedTypeDescription: (type: ColumnType) => string;

package/dist/components/DataTable/dataTable.tokens.d.ts

@@ -0,0 +1,174 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+export type TableTokenType = {
+    padding: CSSObject['padding'];
+    width: CSSObject['width'];
+    height: CSSObject['height'];
+    display: CSSObject['display'];
+    flexDirection: CSSObject['flexDirection'];
+    position: CSSObject['position'];
+    header: {
+        display: CSSObject['display'];
+        justifyContent: CSSObject['justifyContent'];
+        alignItems: CSSObject['alignItems'];
+        marginBottom: CSSObject['marginBottom'];
+        gap: CSSObject['gap'];
+        maxWidth: CSSObject['maxWidth'];
+        overflowX: CSSObject['overflowX'];
+        title: CSSObject;
+        description: CSSObject;
+        headerSlot1: CSSObject;
+        headerSlot2: CSSObject;
+        headerSlot3: CSSObject;
+    };
+    dataTable: {
+        borderRadius: CSSObject['borderRadius'];
+        border: CSSObject['border'];
+        maxHeight: CSSObject['maxHeight'];
+        minHeight?: CSSObject['minHeight'];
+        bulkActions: {
+            top: CSSObject['top'];
+            left: CSSObject['left'];
+            transform: CSSObject['transform'];
+            zIndex: CSSObject['zIndex'];
+            backgroundColor: CSSObject['backgroundColor'];
+            color: CSSObject['color'];
+            borderRadius: CSSObject['borderRadius'];
+            padding: CSSObject['padding'];
+            boxShadow: CSSObject['boxShadow'];
+            display: CSSObject['display'];
+            alignItems: CSSObject['alignItems'];
+            gap: CSSObject['gap'];
+            minWidth: CSSObject['minWidth'];
+            border: CSSObject['border'];
+            selectText: CSSObject;
+            height: CSSObject['height'];
+        };
+        table: {
+            width: CSSObject['width'];
+            tableLayout: CSSObject['tableLayout'];
+            borderCollapse: CSSObject['borderCollapse'];
+            borderSpacing: CSSObject['borderSpacing'];
+            position: CSSObject['position'];
+            minWidth: CSSObject['minWidth'];
+            header: {
+                backgroundColor: CSSObject['backgroundColor'];
+                borderBottom: CSSObject['borderBottom'];
+                height: CSSObject['height'];
+                row: CSSObject;
+                cell: CSSObject & {
+                    width?: CSSObject['width'];
+                    fontSize?: CSSObject['fontSize'];
+                    fontWeight?: CSSObject['fontWeight'];
+                };
+                sortable: {
+                    cursor: CSSObject['cursor'];
+                    userSelect: CSSObject['userSelect'];
+                };
+                filter: {
+                    backgroundColor: CSSObject['backgroundColor'];
+                    borderRadius: CSSObject['borderRadius'];
+                    border: CSSObject['border'];
+                    cursor: CSSObject['cursor'];
+                    textColor: CSSObject['color'];
+                    maxHeight: CSSObject['maxHeight'];
+                    overflowY: CSSObject['overflowY'];
+                    gap: CSSObject['gap'];
+                    sortOption: {
+                        padding: CSSObject['padding'];
+                        borderRadius: CSSObject['borderRadius'];
+                        hoverBackground: CSSObject['backgroundColor'];
+                        iconColor: CSSObject['color'];
+                        textColor: CSSObject['color'];
+                        fontSize: CSSObject['fontSize'];
+                        fontWeight: CSSObject['fontWeight'];
+                    };
+                    selectedBackground: CSSObject['backgroundColor'];
+                    hoverBackground: CSSObject['backgroundColor'];
+                    selectedTextColor: CSSObject['color'];
+                    normalTextColor: CSSObject['color'];
+                    selectedFontWeight: CSSObject['fontWeight'];
+                    normalFontWeight: CSSObject['fontWeight'];
+                    itemPadding: CSSObject['padding'];
+                    itemGap: CSSObject['gap'];
+                    itemBorderRadius: CSSObject['borderRadius'];
+                    itemFontSize: CSSObject['fontSize'];
+                    groupLabelFontSize: CSSObject['fontSize'];
+                    groupLabelFontWeight: CSSObject['fontWeight'];
+                    groupLabelColor: CSSObject['color'];
+                    groupLabelPadding: CSSObject['padding'];
+                    groupLabelTextTransform: CSSObject['textTransform'];
+                    separatorHeight: CSSObject['height'];
+                    separatorColor: CSSObject['backgroundColor'];
+                };
+            };
+            body: {
+                backgroundColor: CSSObject['backgroundColor'];
+                borderTop: CSSObject['borderTop'];
+                row: CSSObject;
+                cell: {
+                    padding: CSSObject['padding'];
+                    fontWeight: CSSObject['fontWeight'];
+                    color: CSSObject['color'];
+                    fontSize: CSSObject['fontSize'];
+                    borderTop: CSSObject['borderTop'];
+                    expandable: {
+                        padding: CSSObject['padding'];
+                        borderTop: CSSObject['borderTop'];
+                        expandButton: {
+                            display: CSSObject['display'];
+                            alignItems: CSSObject['alignItems'];
+                            justifyContent: CSSObject['justifyContent'];
+                            width: CSSObject['width'];
+                            height: CSSObject['height'];
+                            borderRadius: CSSObject['borderRadius'];
+                            backgroundColor: CSSObject['backgroundColor'];
+                            cursor: CSSObject['cursor'];
+                            transition: CSSObject['transition'];
+                            color: CSSObject['color'];
+                            border: CSSObject['border'];
+                            '&:hover': CSSObject['&:hover'];
+                        };
+                    };
+                };
+            };
+            footer: {
+                display: CSSObject['display'];
+                justifyContent: CSSObject['justifyContent'];
+                alignItems: CSSObject['alignItems'];
+                padding: CSSObject['padding'];
+                borderTop: CSSObject['borderTop'];
+                height: CSSObject['height'];
+                position: CSSObject['position'];
+                bottom: CSSObject['bottom'];
+                backgroundColor: CSSObject['backgroundColor'];
+                zIndex: CSSObject['zIndex'];
+                flexShrink: CSSObject['flexShrink'];
+                pagination: {
+                    pageText: {
+                        fontSize: CSSObject['fontSize'];
+                        color: CSSObject['color'];
+                    };
+                    pageSizeSelector: {
+                        gap: CSSObject['gap'];
+                        padding: CSSObject['padding'];
+                        borderRadius: CSSObject['borderRadius'];
+                        display: CSSObject['display'];
+                        alignItems: CSSObject['alignItems'];
+                        backgroundColor: CSSObject['backgroundColor'];
+                        border: CSSObject['border'];
+                        background: CSSObject['background'];
+                        cursor: CSSObject['cursor'];
+                        color: CSSObject['color'];
+                        fontSize: CSSObject['fontSize'];
+                        hoverColor: CSSObject['backgroundColor'];
+                    };
+                    pageNavigation: {
+                        gap: CSSObject['gap'];
+                    };
+                };
+            };
+        };
+    };
+};
+export declare const getTableToken: (foundationToken: FoundationTokenType) => TableTokenType;

package/dist/components/DataTable/index.d.ts

@@ -0,0 +1,10 @@
+export { default as DataTable } from './DataTable';
+export * from './types';
+export * from './TableHeader/types';
+export * from './TableBody/types';
+export * from './TableCell/types';
+export * from './TableFooter/types';
+export * from './DataTableHeader/types';
+export type { TableTokenType } from './dataTable.tokens';
+export { validateColumnData, getColumnTypeConfig } from './columnTypes';
+export type { ColumnFilterOption, SelectData, MultiSelectData, DateData, DateRangeData, TagData, ColumnDataTypeMap, GetColumnDataType, ColumnTypeConfig, AvatarData as DataTableAvatarData, } from './columnTypes';

package/dist/components/DataTable/types.d.ts

@@ -0,0 +1,230 @@
+import { ReactNode } from 'react';
+export declare enum SortDirection {
+    NONE = "none",
+    ASCENDING = "asc",
+    DESCENDING = "desc"
+}
+export declare enum FilterType {
+    TEXT = "text",
+    NUMBER = "number",
+    SELECT = "select",
+    MULTISELECT = "multiselect",
+    DATE = "date",
+    BOOLEAN = "boolean",
+    SLIDER = "slider"
+}
+export declare enum ColumnType {
+    TEXT = "text",
+    NUMBER = "number",
+    AVATAR = "avatar",
+    TAG = "tag",
+    PROGRESS = "progress",
+    DROPDOWN = "dropdown",
+    REACT_ELEMENT = "react_element",
+    SELECT = "select",
+    MULTISELECT = "multiselect",
+    DATE = "date",
+    DATE_RANGE = "date_range",
+    SLIDER = "slider",
+    CUSTOM = "custom"
+}
+export type AvatarColumnProps = {
+    src?: string;
+    alt?: string;
+    label: string;
+    sublabel?: string;
+    imageUrl?: string;
+};
+export type TagColumnProps = {
+    text: string;
+    variant?: 'filled' | 'subtle' | 'outlined' | 'no_fill';
+    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral';
+    size?: 'sm' | 'md' | 'lg';
+    leftSlot?: ReactNode;
+    rightSlot?: ReactNode;
+};
+export type ProgressColumnProps = {
+    value: number;
+    max?: number;
+    label?: string;
+    showPercentage?: boolean;
+    color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+};
+export type DropdownColumnProps = {
+    options: Array<{
+        id: string;
+        label: string;
+        value: unknown;
+        icon?: React.ReactNode;
+    }>;
+    selectedValue?: unknown;
+    placeholder?: string;
+    onSelect?: (value: unknown) => void;
+};
+export type DateColumnProps = {
+    date: Date | string;
+    format?: string;
+    showTime?: boolean;
+};
+export type SliderColumnProps = {
+    min: number;
+    max: number;
+    step?: number;
+    valueType?: 'number' | 'percentage' | 'decimal';
+    decimalPlaces?: number;
+    prefix?: string;
+    suffix?: string;
+};
+export type FilterOption = {
+    id: string;
+    label: string;
+    value: string;
+};
+export type ColumnManagerProps<T extends Record<string, unknown>> = {
+    columns: ColumnDefinition<T>[];
+    visibleColumns: ColumnDefinition<T>[];
+    onColumnChange: (columns: ColumnDefinition<T>[]) => void;
+};
+export type AdvancedFilterProps = {
+    filters: unknown[];
+    onFiltersChange: (filters: unknown[]) => void;
+    onClearFilters: () => void;
+};
+export type BaseColumnDefinition<T> = {
+    field: keyof T;
+    header: string;
+    headerSubtext?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    width?: string;
+    isVisible?: boolean;
+    isSortable?: boolean;
+    isEditable?: boolean;
+    filterOptions?: FilterOption[];
+    canHide?: boolean;
+    frozen?: boolean;
+    className?: string;
+    filterType?: FilterType;
+};
+export type ColumnDefinition<T> = (BaseColumnDefinition<T> & {
+    type: ColumnType.TEXT;
+    renderCell?: (value: string, row: T, index: number) => ReactNode;
+}) | (BaseColumnDefinition<T> & {
+    type: ColumnType.NUMBER;
+    renderCell?: (value: number, row: T, index: number) => ReactNode;
+    format?: 'integer' | 'decimal' | 'currency' | 'percentage';
+    precision?: number;
+}) | (BaseColumnDefinition<T> & {
+    type: ColumnType.AVATAR;
+    renderCell?: (value: AvatarColumnProps, row: T, index: number) => ReactNode;
+}) | (BaseColumnDefinition<T> & {
+    type: ColumnType.TAG;
+    renderCell?: (value: TagColumnProps, row: T, index: number) => ReactNode;
+}) | (BaseColumnDefinition<T> & {
+    type: ColumnType.PROGRESS;
+    renderCell?: (value: ProgressColumnProps, row: T, index: number) => ReactNode;
+}) | (BaseColumnDefinition<T> & {
+    type: ColumnType.DROPDOWN;
+    renderCell?: (value: DropdownColumnProps, row: T, index: number) => ReactNode;
+    dropdownOptions?: Array<{
+        id: string;
+        label: string;
+        value: unknown;
+    }>;
+}) | (BaseColumnDefinition<T> & {
+    type: ColumnType.DATE;
+    renderCell?: (value: DateColumnProps, row: T, index: number) => ReactNode;
+    dateFormat?: string;
+    showTime?: boolean;
+}) | (BaseColumnDefinition<T> & {
+    type: ColumnType.SLIDER;
+    renderCell?: (value: number, row: T, index: number) => ReactNode;
+    sliderConfig: SliderColumnProps;
+}) | (BaseColumnDefinition<T> & {
+    type: ColumnType.REACT_ELEMENT;
+    renderCell: (value: unknown, row: T, index: number) => ReactNode;
+    isSortable: false;
+}) | (BaseColumnDefinition<T> & {
+    type: ColumnType.SELECT | ColumnType.MULTISELECT | ColumnType.DATE_RANGE | ColumnType.CUSTOM;
+    renderCell?: (value: unknown, row: T, index?: number) => ReactNode;
+});
+export type SortConfig = {
+    field: string;
+    direction: SortDirection;
+};
+export type SearchConfig = {
+    query: string;
+    caseSensitive?: boolean;
+    searchFields?: string[];
+};
+export type ColumnFilter = {
+    field: keyof Record<string, unknown>;
+    type: FilterType;
+    value: string | string[] | {
+        min: number;
+        max: number;
+    };
+    operator: 'equals' | 'contains' | 'startsWith' | 'endsWith' | 'gt' | 'lt' | 'gte' | 'lte' | 'range';
+};
+export type PaginationConfig = {
+    currentPage: number;
+    pageSize: number;
+    totalRows: number;
+    pageSizeOptions?: number[];
+};
+export type BulkAction = {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    variant?: 'primary' | 'secondary' | 'danger';
+    onClick: (selectedRowIds: string[]) => void;
+};
+export type DataTableProps<T extends Record<string, unknown>> = {
+    data: T[];
+    columns: ColumnDefinition<T>[];
+    idField: keyof T;
+    title?: string;
+    description?: string;
+    className?: string;
+    isHoverable?: boolean;
+    defaultSort?: SortConfig;
+    onSortChange?: (sortConfig: SortConfig) => void;
+    enableSearch?: boolean;
+    searchPlaceholder?: string;
+    serverSideSearch?: boolean;
+    onSearchChange?: (searchConfig: SearchConfig) => void;
+    enableFiltering?: boolean;
+    enableAdvancedFilter?: boolean;
+    advancedFilterComponent?: React.ComponentType<AdvancedFilterProps>;
+    advancedFilters?: unknown[];
+    serverSideFiltering?: boolean;
+    onFilterChange?: (filters: ColumnFilter[]) => void;
+    onAdvancedFiltersChange?: (filters: unknown[]) => void;
+    columnFreeze?: number;
+    enableColumnManager?: boolean;
+    pagination?: PaginationConfig;
+    serverSidePagination?: boolean;
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    isLoading?: boolean;
+    showToolbar?: boolean;
+    headerSlot1?: ReactNode;
+    headerSlot2?: ReactNode;
+    enableInlineEdit?: boolean;
+    onRowSave?: (rowId: unknown, updatedRow: T) => void;
+    onRowCancel?: (rowId: unknown) => void;
+    onRowClick?: (row: T, index: number) => void;
+    onFieldChange?: (rowId: unknown, fieldName: keyof T, value: unknown) => void;
+    enableRowExpansion?: boolean;
+    renderExpandedRow?: (expandedData: {
+        row: T;
+        index: number;
+        isExpanded: boolean;
+        toggleExpansion: () => void;
+    }) => ReactNode;
+    isRowExpandable?: (row: T, index: number) => boolean;
+    onRowExpansionChange?: (rowId: unknown, isExpanded: boolean, rowData: T) => void;
+    enableRowSelection?: boolean;
+    bulkActions?: BulkAction[];
+    getRowStyle?: (row: T, index: number) => React.CSSProperties;
+};