@chumsinc/sortable-tables 2.1.2 → 2.2.0

package/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../src/DataTableTH.tsx","../src/DataTableHead.tsx","../src/DataTableCell.tsx","../src/DataTableRow.tsx","../src/DataTableTBody.tsx","../src/Table.tsx","../src/DataTable.tsx","../src/SortableTableTH.tsx","../src/SortableTableHead.tsx","../src/SortableTable.tsx","../src/RowsPerPage.tsx","../src/TablePagination.tsx"],"sourcesContent":["import React from \"react\";\r\nimport classNames from \"classnames\";\r\nimport type {DataTableTHProps} from \"./types\";\r\n\r\n\r\nfunction DataTableTH<T = unknown>({\r\n                                                     field,\r\n                                                     className,\r\n                                                     children,\r\n                                                     ...rest\r\n                                                 }: DataTableTHProps<T>) {\r\n    const thClassName = classNames({[`text-${field.align}`]: !!field.align}, className);\r\n    return (\r\n        <th className={thClassName} scope=\"col\" {...rest}>\r\n            {children ?? field.title}\r\n        </th>\r\n    )\r\n}\r\nDataTableTH.displayName = 'DataTableTH';\r\nexport default DataTableTH;\r\n","import React from \"react\";\r\nimport DataTableTH from \"./DataTableTH\";\r\nimport classNames from \"classnames\";\r\nimport type {DataTableHeadProps} from \"./types\";\r\n\r\n\r\nfunction DataTableHead<T = unknown>({fields, ...rest}: DataTableHeadProps<T>) {\r\n    return (\r\n        <thead {...rest}>\r\n        <tr>\r\n            {fields.map((field, index) => (\r\n                <DataTableTH key={field.id ?? index}\r\n                             {...field.thProps}\r\n                             field={field}\r\n                             className={classNames(\r\n                                 typeof field.className === 'function'\r\n                                     ? {[`text-${field.align}`]: !!field.align}\r\n                                     : field.className\r\n                             )}/>\r\n            ))}\r\n        </tr>\r\n        </thead>\r\n    )\r\n}\r\n\r\nDataTableHead.displayName = 'DataTableHead';\r\nexport default DataTableHead;\r\n","import React, {ReactNode} from 'react';\nimport type {DataTableCellProps} from \"./types\";\nimport classNames from \"classnames\";\n\nexport default function DataTableCell<T = unknown>({field, row, className, as, ...rest}:DataTableCellProps<T>) {\n    const cellClassName = classNames(\n        {[`text-${field.align}`]: !!field.align},\n        className,\n        typeof field.className === 'function' ? field.className(row) : field.className\n    );\n    return React.createElement(\n        (as ?? field.as) ?? 'td',\n        {\n            className: cellClassName,\n            scope: (as ?? field.as) === 'th' ? 'row' : undefined,\n            colSpan: field.colSpan,\n            ...field.cellProps,\n            ...rest\n        },\n        (row[field.field] === undefined && !field.render)\n            ? null\n            : (\n                typeof field.render === 'function'\n                    ? field.render(row)\n                    : row[field.field] as ReactNode\n            )\n    )\n}\n","import React, {MouseEvent} from 'react';\r\nimport classNames from \"classnames\";\r\nimport type {DataTableRowProps} from \"./types\";\r\nimport DataTableCell from \"./DataTableCell\";\r\n\r\n\r\nfunction DataTableRow<T = unknown>({\r\n                                       className,\r\n                                       rowClassName,\r\n                                       selected,\r\n                                       fields,\r\n                                       row,\r\n                                       trRef,\r\n                                       onClick,\r\n                                       ...rest\r\n                                   }: DataTableRowProps<T>) {\r\n    const clickHandler = (ev: MouseEvent<HTMLTableRowElement>) => {\r\n        onClick?.(row, ev)\r\n    }\r\n\r\n    const _className = typeof rowClassName === 'function' ? rowClassName(row) : rowClassName;\r\n    if (!row) {\r\n        return null;\r\n    }\r\n\r\n    return (\r\n        <tr ref={trRef}\r\n            className={classNames({'table-active': selected}, className, _className)}\r\n            onClick={clickHandler}\r\n            {...rest}>\r\n            {fields.map((field, index) => (<DataTableCell key={index} field={field} row={row}/>))}\r\n        </tr>\r\n    )\r\n}\r\n\r\nDataTableRow.displayName = 'DataTableRow';\r\nexport default DataTableRow;\r\n","import React from 'react';\r\nimport DataTableRow from \"./DataTableRow\";\r\nimport type {DataTableTBodyProps} from \"./types\";\r\n\r\n\r\nfunction DataTableTBody<T = unknown>({\r\n                                         fields,\r\n                                         data,\r\n                                         keyField,\r\n                                         rowClassName,\r\n                                         renderRow,\r\n                                         onSelectRow,\r\n                                         selected = '',\r\n                                         children,\r\n                                         ...rest\r\n                                     }: DataTableTBodyProps<T>) {\r\n    return (\r\n        <tbody {...rest}>\r\n        {data.map(row => {\r\n            const keyValue = String(typeof keyField === \"function\" ? keyField(row) : row[keyField]);\r\n            const isSelected = typeof selected === 'function' ? selected(row) : keyValue === selected;\r\n            if (renderRow) {\r\n                return renderRow(row);\r\n            }\r\n            return (\r\n                <DataTableRow key={keyValue} onClick={onSelectRow}\r\n                              rowClassName={rowClassName}\r\n                              fields={fields}\r\n                              row={row} selected={isSelected}/>\r\n            )\r\n        })}\r\n        {children}\r\n        </tbody>\r\n    )\r\n}\r\n\r\nDataTableTBody.displayName = 'DataTableTBody';\r\nexport default DataTableTBody\r\n","import React, {TableHTMLAttributes} from 'react';\nimport styled from \"@emotion/styled\";\nimport type {DataTableProps} from \"./types\";\nimport classNames from \"classnames\";\n\nexport type StyledTableProps = TableHTMLAttributes<HTMLTableElement> & Pick<DataTableProps, 'sticky' | 'responsive'>\n\nconst StyledTable = styled.table<StyledTableProps>`\n    --table-sticky-top: ${props => props.sticky ? '0' : undefined};\n\n    thead {\n        tr:nth-of-type(1) td,\n        tr:nth-of-type(1) th {\n            top: var(--table-sticky-top, unset);\n            position: ${props => props.sticky ? \"sticky\" : \"unset\"};\n            z-index: ${props => props.sticky ? 10 : \"unset\"};\n            background: ${props => props.sticky ? \"linear-gradient(var(--bs-table-bg) 75%, rgba(var(--bs-secondary-bg-rgb), 0.9))\" : \"unset\"};\n        }\n    }\n`\n\nexport default React.forwardRef<HTMLTableElement, StyledTableProps>(\n    function Table({\n                       sticky,\n                       responsive,\n                       children,\n                       className,\n                       ...rest\n                   }, ref) {\n        if (responsive) {\n            const _className = classNames(className, {\n                'table-responsive': responsive === true,\n                [`table-responsive-${responsive}`]: responsive !== true,\n            })\n            return (\n                <div className={_className}>\n                    <StyledTable ref={ref} {...rest}>{children}</StyledTable>\n                </div>\n            )\n        }\n        return (\n            <StyledTable className={className} sticky={sticky} ref={ref} {...rest}>{children}</StyledTable>\n        )\n    })\n","import React from 'react';\r\nimport classNames from \"classnames\";\r\nimport DataTableHead from \"./DataTableHead\";\r\nimport DataTableTBody from \"./DataTableTBody\";\r\nimport type {DataTableProps} from \"./types\";\r\nimport Table from \"./Table\";\r\n\r\n\r\nfunction DataTable<T = unknown>({\r\n                                    fields,\r\n                                    data,\r\n                                    keyField,\r\n                                    size = '',\r\n                                    sticky,\r\n                                    responsive,\r\n                                    rowClassName,\r\n                                    renderRow,\r\n                                    onSelectRow,\r\n                                    selected = '',\r\n                                    className = '',\r\n                                    tfoot,\r\n                                    children,\r\n                                    tableHeadProps,\r\n                                    ...rest\r\n                                }: DataTableProps<T>) {\r\n\r\n    const tableClassName = classNames('table', className, {\r\n        [`table-${size}`]: !!size,\r\n    })\r\n\r\n    return (\r\n        <Table sticky={sticky} responsive={responsive} className={tableClassName} {...rest}>\r\n            <DataTableHead {...tableHeadProps} fields={fields}/>\r\n            {!!data.length && (\r\n                <DataTableTBody fields={fields} data={data} keyField={keyField} rowClassName={rowClassName}\r\n                                renderRow={renderRow}\r\n                                onSelectRow={onSelectRow} selected={selected}/>\r\n            )}\r\n            {children}\r\n            {tfoot}\r\n        </Table>\r\n    )\r\n}\r\n\r\nDataTable.displayName = 'DataTable';\r\nexport default DataTable;\r\n","import React from \"react\";\r\nimport classNames from \"classnames\";\r\nimport DataTableTH from \"./DataTableTH\";\r\nimport type {SortableTableTHProps, UIFlexAlign} from \"./types\";\r\nimport styled from '@emotion/styled';\r\n\r\nconst flexJustifyContent = (align?: UIFlexAlign) => {\r\n    if (!align) {\r\n        return 'flex-start';\r\n    }\r\n    switch (align) {\r\n        case 'end':\r\n            return 'flex-end';\r\n        default:\r\n            return 'center';\r\n    }\r\n}\r\n\r\ntype FieldTitleProps = {\r\n    sorted?: boolean;\r\n    align?: UIFlexAlign;\r\n};\r\nconst FieldTitle = styled.div<FieldTitleProps>`\r\n    display: flex;\r\n    width: 100%;\r\n    flex-direction: ${props => props.align === 'end' ? 'row-reverse' : 'row'};\r\n    justify-content: ${props => flexJustifyContent(props.align)};\r\n    .sort-icon {\r\n        flex-grow: ${props => props.align === 'end' ? '1' : '0'};\r\n        opacity: ${props => props.sorted ? 1 : 0};\r\n    }\r\n    &:hover .sort-icon {\r\n        color: ${props => props.sorted ? 'unset' : 'var(--bs-primary)'} ;\r\n        opacity: 0.75;\r\n        transition: opacity 0.2s;\r\n    }\r\n`\r\n\r\nfunction SortableTableTH<T = unknown>({\r\n                                          field,\r\n                                          sorted,\r\n                                          ascending,\r\n                                          className,\r\n                                          onClick\r\n                                      }: SortableTableTHProps<T>) {\r\n    if (!field.sortable) {\r\n        return (<DataTableTH field={field} className={className}/>)\r\n    }\r\n\r\n    const {className: _thClassName, ...thProps} = field.thProps ?? {};\r\n    const thClassName = classNames(\r\n        className,\r\n        _thClassName,\r\n        {[`text-${field.align}`]: !!field.align}\r\n    );\r\n\r\n    const clickHandler = () => {\r\n        onClick({field: field.field, ascending: !sorted ? true : !ascending});\r\n    }\r\n\r\n    const iconClassName = {\r\n        'bi-arrow-down': ascending,\r\n        'bi-arrow-up': !ascending,\r\n    }\r\n\r\n    return (\r\n        <th {...thProps} className={classNames(\"sortable\", thClassName)} scope=\"col\" onClick={clickHandler}>\r\n            <FieldTitle sorted={sorted} align={field.align}>\r\n                <div className=\"field-title\">{field.title}</div>\r\n                <div className={classNames('me-1 sort-icon', iconClassName)}/>\r\n            </FieldTitle>\r\n        </th>\r\n    )\r\n}\r\n\r\nSortableTableTH.displayName = 'SortableTableTH';\r\nexport default SortableTableTH;\r\n","import React from \"react\";\r\nimport SortableTableTH from \"./SortableTableTH\";\r\nimport classNames from \"classnames\";\r\nimport type {SortableTableHeadProps} from \"./types\";\r\n\r\n\r\nfunction SortableTableHead<T = unknown>({\r\n                                                           currentSort,\r\n                                                           fields,\r\n                                                           onChangeSort,\r\n                                                       }: SortableTableHeadProps<T>) {\r\n    const {field, ascending} = currentSort;\r\n    return (\r\n        <thead>\r\n        <tr>\r\n            {fields.map((tableField, index) => (\r\n                <SortableTableTH<T> key={index} field={tableField}\r\n                                 sorted={field === tableField.field} ascending={ascending}\r\n                                 className={classNames(\r\n                                typeof tableField.className === 'function'\r\n                                    ? {[`text-${tableField.align}`]: !!tableField.align}\r\n                                    : tableField.className\r\n                            )} onClick={onChangeSort}/>\r\n            ))}\r\n        </tr>\r\n        </thead>\r\n    )\r\n}\r\n\r\nSortableTableHead.displayName = 'SortableTableHead';\r\nexport default SortableTableHead;\r\n","import React from 'react';\r\nimport classNames from \"classnames\";\r\nimport SortableTableHead from \"./SortableTableHead\";\r\nimport DataTableTBody from \"./DataTableTBody\";\r\nimport type {SortableTableProps} from \"./types\";\r\nimport Table from \"./Table\";\r\n\r\n\r\nfunction SortableTable<T = unknown>({\r\n                                        fields,\r\n                                        data,\r\n                                        currentSort,\r\n                                        onChangeSort,\r\n                                        keyField,\r\n                                        size = '',\r\n                                        sticky,\r\n                                        rowClassName,\r\n                                        renderRow,\r\n                                        onSelectRow,\r\n                                        selected = '',\r\n                                        className = '',\r\n                                        tfoot,\r\n                                        children,\r\n                                        ...rest\r\n                                    }: SortableTableProps<T>) {\r\n    const tableClassName = classNames('table', className, {\r\n        [`table-${size}`]: !!size,\r\n    })\r\n\r\n    return (\r\n        <Table className={tableClassName} sticky={sticky} {...rest}>\r\n            <SortableTableHead currentSort={currentSort} fields={fields} onChangeSort={onChangeSort}/>\r\n            {!!data.length && (\r\n                <DataTableTBody fields={fields} data={data} keyField={keyField} rowClassName={rowClassName}\r\n                                renderRow={renderRow}\r\n                                onSelectRow={onSelectRow} selected={selected}/>\r\n            )}\r\n            {children}\r\n            {tfoot}\r\n        </Table>\r\n    )\r\n}\r\n\r\nSortableTable.displayName = 'SortableTable';\r\nexport default SortableTable;\r\n","import React, {ChangeEvent, useId} from 'react';\r\nimport classNames from \"classnames\";\r\nimport type {RowsPerPageProps} from \"./types\";\r\n\r\nexport const defaultRowsPerPageValues: number[] = [10, 25, 50, 100, 250, 500, 1000];\r\n\r\n\r\nfunction RowsPerPage({\r\n                         value,\r\n                         pageValues = defaultRowsPerPageValues,\r\n                         size,\r\n                         label,\r\n                         className,\r\n                         onChange,\r\n                         ...rest\r\n                     }: RowsPerPageProps) {\r\n    const id = useId();\r\n    const changeHandler = (ev: ChangeEvent<HTMLSelectElement>) => onChange(Number(ev.target.value));\r\n    const selectClassName = className ?? classNames('form-select', {[`form-select-${size}`]: !!size});\r\n    const inputGroupClassName = classNames('input-group', {\r\n        [`input-group-${size}`]: !!size,\r\n    })\r\n\r\n    return (\r\n        <div className={inputGroupClassName} key={value}>\r\n            <label className=\"input-group-text\" htmlFor={id}>{label ?? 'Rows'}</label>\r\n            <select className={selectClassName} id={id}\r\n                    value={value} onChange={changeHandler} {...rest}>\r\n                {pageValues.map(value => (\r\n                    <option key={value} value={value}>{value}</option>\r\n                ))}\r\n            </select>\r\n        </div>\r\n    )\r\n}\r\n\r\nRowsPerPage.displayName = 'RowsPerPage';\r\nexport default RowsPerPage;\r\n","import React from 'react';\r\nimport RowsPerPage from \"./RowsPerPage\";\r\nimport classNames from \"classnames\";\r\nimport type {TablePaginationProps} from \"./types\";\r\n\r\nfunction TablePagination({\r\n                             page,\r\n                             rowsPerPage,\r\n                             onChangePage,\r\n                             count,\r\n                             size,\r\n                             showFirst,\r\n                             showLast,\r\n                             className,\r\n                             rowsPerPageProps,\r\n                             ...rest\r\n                         }: TablePaginationProps) {\r\n\r\n    const first = count === 0 ? 0 : (page * rowsPerPage) + 1;\r\n    const last = Math.min(page * rowsPerPage + rowsPerPage, count);\r\n    const lastPage = rowsPerPage === 0 ? 0 : Math.floor((count - 1) / rowsPerPage);\r\n\r\n    const buttonClassName = classNames(\"btn btn-link\", {[`btn-${size}`]: !!size});\r\n\r\n    return (\r\n        <div className={classNames(\"row g-3 justify-content-end\", className)} {...rest}>\r\n            {!!rowsPerPageProps && (\r\n                <div className=\"col-auto\">\r\n                    <RowsPerPage {...rowsPerPageProps} value={rowsPerPage} size={size}/>\r\n                </div>\r\n            )}\r\n            <div className=\"col-auto\">\r\n                <div className=\"row g-3 flex-nowrap align-items-baseline\">\r\n                    <div className=\"col-auto\">\r\n                        {first}-{last} of {count}\r\n                    </div>\r\n                    {showFirst && (\r\n                        <div className=\"col-auto\">\r\n                            <button className={buttonClassName} disabled={page === 0}\r\n                                    onClick={() => onChangePage(0)} aria-label=\"First page\">\r\n                                <span className=\"bi-chevron-bar-left\" aria-hidden=\"true\"/>\r\n                            </button>\r\n                        </div>\r\n                    )}\r\n                    <div className=\"col-auto\">\r\n                        <button className={buttonClassName} disabled={page === 0}\r\n                                onClick={() => onChangePage(page - 1)} aria-label=\"Previous page\">\r\n                            <span className=\"bi-chevron-left\" aria-hidden=\"true\"/>\r\n                        </button>\r\n                    </div>\r\n                    <div className=\"col-auto\">\r\n                        <button className={buttonClassName} disabled={page >= lastPage}\r\n                                onClick={() => onChangePage(page + 1)} aria-label=\"Next page\">\r\n                            <span className=\"bi-chevron-right\" aria-hidden=\"true\"/>\r\n                        </button>\r\n                    </div>\r\n                    {showLast && (\r\n                        <div className=\"col-auto\">\r\n                            <button className={buttonClassName} disabled={page >= lastPage}\r\n                                    onClick={() => onChangePage(lastPage)} aria-label=\"Last page\">\r\n                                <span className=\"bi-chevron-bar-right\" aria-hidden=\"true\"/>\r\n                            </button>\r\n                        </div>\r\n                    )}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n\r\nTablePagination.displayname = 'TablePagination';\r\nexport default TablePagination\r\n"],"names":["DataTableTH","field","className","children","rest","thClassName","classNames","jsx","DataTableHead","fields","index","DataTableCell","row","as","cellClassName","React","DataTableRow","rowClassName","selected","trRef","onClick","clickHandler","ev","_className","DataTableTBody","data","keyField","renderRow","onSelectRow","jsxs","keyValue","isSelected","StyledTable","styled","props","Table","sticky","responsive","ref","DataTable","size","tfoot","tableHeadProps","tableClassName","flexJustifyContent","align","FieldTitle","SortableTableTH","sorted","ascending","_thClassName","thProps","iconClassName","SortableTableHead","currentSort","onChangeSort","tableField","SortableTable","defaultRowsPerPageValues","RowsPerPage","value","pageValues","label","onChange","id","useId","changeHandler","selectClassName","inputGroupClassName","TablePagination","page","rowsPerPage","onChangePage","count","showFirst","showLast","rowsPerPageProps","first","last","lastPage","buttonClassName"],"mappings":"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"}
+{"version":3,"file":"index.es.js","sources":["../src/TableProvider.tsx","../node_modules/clsx/dist/clsx.mjs","../src/Table.tsx","../src/DataTableTH.tsx","../src/DataTableHead.tsx","../src/DataTableWithContext.tsx","../src/DataTable.tsx","../src/DataTableCell.tsx","../src/DataTableRow.tsx","../src/DataTableTBody.tsx","../src/SortableTableTH.tsx","../src/SortableTableHead.tsx","../src/SortableTableWithContext.tsx","../src/SortableTable.tsx","../src/RowsPerPage.tsx","../src/TablePagination.tsx","../src/DataTableCols.tsx"],"sourcesContent":["import {createContext, ReactNode, useCallback, useContext, useMemo, useState} from \"react\";\r\nimport {DataTableField} from \"./types\";\r\n\r\n/* eslint-disable react-refresh/only-export-components */\r\n\r\nexport interface TableContextData<T = unknown> {\r\n    fields: DataTableField<T>[];\r\n    setFields: (next: DataTableField<T>[] | ((prev: DataTableField<T>[]) => DataTableField<T>[])) => void;\r\n    updateField: (key: string | number, arg: Partial<DataTableField<T>>) => void;\r\n    getField: (key: string | number) => DataTableField<T> | undefined;\r\n}\r\n\r\nconst DataTableContext = createContext<TableContextData<unknown> | null>(null)\r\n\r\nexport interface TableProviderProps<T = unknown> {\r\n    initialFields: DataTableField<T>[];\r\n    children: ReactNode;\r\n}\r\n\r\nexport default function TableProvider<T = unknown>({children, initialFields = []}: TableProviderProps<T>) {\r\n    const [fields, setFieldsState] = useState<DataTableField<T>[]>(initialFields);\r\n\r\n    const setFields = useCallback((fields: DataTableField<T>[] | ((prev: DataTableField<T>[]) => DataTableField<T>[])) => {\r\n        setFieldsState(fields)\r\n    }, []);\r\n    const updateField = useCallback((key: string | number, arg: Partial<DataTableField<T>>) => {\r\n        const nextState = fields.map(field => {\r\n            if (field.id === key) {\r\n                return {...field, ...arg}\r\n            }\r\n            return field;\r\n        });\r\n        setFieldsState(nextState);\r\n    }, [fields])\r\n\r\n    const getField = useCallback((key: string | number) => fields.find(field => field.id === key), [fields]);\r\n\r\n\r\n    const value = useMemo<TableContextData<T>>(\r\n        () => ({\r\n            fields, setFields, updateField, getField\r\n        }),\r\n        [fields, setFields, updateField, getField]\r\n    )\r\n\r\n    return (\r\n        <DataTableContext.Provider value={value as unknown as TableContextData<unknown>}>\r\n            {children}\r\n        </DataTableContext.Provider>\r\n    )\r\n}\r\n\r\n\r\nexport function useTableContext<T = unknown>() {\r\n    const context = useContext(DataTableContext) as TableContextData<T>;\r\n    if (!context) {\r\n        throw new Error('useTableContext must be used within a FieldsProvider');\r\n    }\r\n    return context;\r\n}\r\n\r\nexport function useTableFields<T = unknown>() {\r\n    return useTableContext<T>().fields;\r\n}\r\n\r\nexport function useField<T = unknown>(key: string | number): DataTableField<T> | null {\r\n    const context = useContext(DataTableContext) as TableContextData<T>;\r\n    if (!context) {\r\n        throw new Error('useTableContext must be used within a FieldsProvider');\r\n    }\r\n    const field = context.fields.find(field => field.id === key);\r\n    return field ?? null\r\n}\r\n\r\nexport function useHasTableFieldsContext() {\r\n    return useContext(DataTableContext) !== null;\r\n}\r\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","import React, {TableHTMLAttributes} from 'react';\nimport styled from \"@emotion/styled\";\nimport type {DataTableProps} from \"./types\";\nimport clsx from \"clsx\";\n\nexport type StyledTableProps = TableHTMLAttributes<HTMLTableElement> & Pick<DataTableProps, 'sticky' | 'responsive'>\n\nconst StyledTable = styled.table<StyledTableProps>`\n    --table-sticky-top: ${props => props.sticky ? '0' : undefined};\n\n    thead {\n        tr:nth-of-type(1) td,\n        tr:nth-of-type(1) th {\n            top: var(--table-sticky-top, unset);\n            position: ${props => props.sticky ? \"sticky\" : \"unset\"};\n            z-index: ${props => props.sticky ? 10 : \"unset\"};\n            background: ${props => props.sticky ? \"linear-gradient(var(--bs-table-bg) 75%, rgba(var(--bs-secondary-bg-rgb), 0.9))\" : \"unset\"};\n        }\n    }\n`\n\nexport default React.forwardRef<HTMLTableElement, StyledTableProps>(\n    function Table({\n                       sticky,\n                       responsive,\n                       children,\n                       className,\n                       ...rest\n                   }, ref) {\n        if (responsive) {\n            const _className = clsx(className, {\n                'table-responsive': responsive === true,\n                [`table-responsive-${responsive}`]: responsive !== true,\n            })\n            return (\n                <div className={_className}>\n                    <StyledTable ref={ref} {...rest}>{children}</StyledTable>\n                </div>\n            )\n        }\n        return (\n            <StyledTable className={className} sticky={sticky} ref={ref} {...rest}>{children}</StyledTable>\n        )\n    })\n","import React from \"react\";\r\nimport type {DataTableTHProps} from \"./types\";\r\nimport clsx from \"clsx\";\r\n\r\n\r\nfunction DataTableTH<T = unknown>({\r\n                                      field,\r\n                                      className,\r\n                                      children,\r\n                                      ...rest\r\n                                  }: DataTableTHProps<T>) {\r\n    const thClassName = clsx({[`text-${field.align}`]: !!field.align}, className);\r\n    return (\r\n        <th className={thClassName} scope=\"col\" {...rest}>\r\n            {children ?? field.title}\r\n        </th>\r\n    )\r\n}\r\n\r\nDataTableTH.displayName = 'DataTableTH';\r\nexport default DataTableTH;\r\n","import React, {type TableHTMLAttributes} from \"react\";\r\nimport DataTableTH from \"./DataTableTH\";\r\nimport clsx from \"clsx\";\r\nimport {useTableFields} from \"./TableProvider\";\r\n\r\n\r\nfunction DataTableHead<T = unknown>({...rest}: TableHTMLAttributes<HTMLTableSectionElement>) {\r\n    const fields = useTableFields<T>()\r\n    return (\r\n        <thead {...rest}>\r\n        <tr>\r\n            {fields.map((field, index) => (\r\n                <DataTableTH key={field.id ?? index}\r\n                             {...field.thProps}\r\n                             field={field}\r\n                             className={clsx(\r\n                                 typeof field.className === 'function'\r\n                                     ? {[`text-${field.align}`]: !!field.align}\r\n                                     : field.className\r\n                             )}/>\r\n            ))}\r\n        </tr>\r\n        </thead>\r\n    )\r\n}\r\n\r\nDataTableHead.displayName = 'DataTableHead';\r\nexport default DataTableHead;\r\n","import type {DataTableProps} from \"./types\";\r\nimport clsx from \"clsx\";\r\nimport Table from \"./Table\";\r\nimport {DataTableCols, DataTableTBody} from \"./index\";\r\nimport DataTableHead from \"./DataTableHead\";\r\n\r\n\r\nexport default function DataTableWithContext<T = unknown>({\r\n                                                              className,\r\n                                                              size,\r\n                                                              responsive,\r\n                                                              sticky,\r\n                                                              data,\r\n                                                              keyField,\r\n                                                              rowClassName,\r\n                                                              renderRow,\r\n                                                              onSelectRow,\r\n                                                              selected,\r\n                                                              tableHeadProps,\r\n                                                              children,\r\n                                                              tfoot,\r\n                                                              ...rest\r\n                                                          }: Omit<DataTableProps<T>, 'fields'>) {\r\n    const tableClassName = clsx('table', className, {\r\n        [`table-${size}`]: !!size,\r\n    })\r\n\r\n    return (\r\n        <Table sticky={sticky} responsive={responsive} className={tableClassName} {...rest}>\r\n            <DataTableCols/>\r\n            <DataTableHead {...tableHeadProps}/>\r\n            {!!data.length && (\r\n                <DataTableTBody data={data} keyField={keyField} rowClassName={rowClassName}\r\n                                renderRow={renderRow}\r\n                                onSelectRow={onSelectRow} selected={selected}/>\r\n            )}\r\n            {children}\r\n            {tfoot}\r\n        </Table>\r\n    )\r\n}\r\n","import type {DataTableProps} from \"./types\";\r\nimport TableProvider from \"./TableProvider\";\r\nimport DataTableWithContext from \"./DataTableWithContext\";\r\n\r\n\r\nfunction DataTable<T = unknown>({\r\n                                    fields,\r\n                                    ...rest\r\n                                }: DataTableProps<T>) {\r\n    return (\r\n        <TableProvider initialFields={fields}>\r\n            <DataTableWithContext {...rest}/>\r\n        </TableProvider>\r\n    )\r\n}\r\n\r\nDataTable.displayName = 'DataTable';\r\nexport default DataTable;\r\n","import {createElement, ReactNode} from 'react';\nimport type {DataTableCellProps} from \"./types\";\nimport clsx from \"clsx\";\n\nexport default function DataTableCell<T = unknown>({field, row, className, as, ...rest}: DataTableCellProps<T>) {\n    const cellClassName = clsx(\n        {[`text-${field.align}`]: !!field.align},\n        className,\n        typeof field.className === 'function' ? field.className(row) : field.className\n    );\n    return createElement(\n        (as ?? field.as) ?? 'td',\n        {\n            className: cellClassName,\n            scope: (as ?? field.as) === 'th' ? 'row' : undefined,\n            colSpan: field.colSpan,\n            ...field.cellProps,\n            ...rest\n        },\n        (row[field.field] === undefined && !field.render)\n            ? null\n            : (\n                typeof field.render === 'function'\n                    ? field.render(row)\n                    : row[field.field] as ReactNode\n            )\n    )\n}\n","import React, {MouseEvent} from 'react';\r\nimport type {DataTableRowProps} from \"./types\";\r\nimport DataTableCell from \"./DataTableCell\";\r\nimport clsx from \"clsx\";\r\nimport {useTableFields} from \"./TableProvider\";\r\n\r\n\r\nfunction DataTableRow<T = unknown>({\r\n                                       className,\r\n                                       rowClassName,\r\n                                       selected,\r\n                                       row,\r\n                                       trRef,\r\n                                       onClick,\r\n                                       ...rest\r\n                                   }: DataTableRowProps<T>) {\r\n    const fields = useTableFields<T>()\r\n    const clickHandler = (ev: MouseEvent<HTMLTableRowElement>) => {\r\n        onClick?.(row, ev)\r\n    }\r\n\r\n    const _className = typeof rowClassName === 'function' ? rowClassName(row) : rowClassName;\r\n    if (!row) {\r\n        return null;\r\n    }\r\n\r\n    return (\r\n        <tr ref={trRef}\r\n            className={clsx({'table-active': selected}, className, _className)}\r\n            onClick={clickHandler}\r\n            {...rest}>\r\n            {fields.map((field, index) => (<DataTableCell key={field?.id ?? index} field={field} row={row}/>))}\r\n        </tr>\r\n    )\r\n}\r\n\r\nDataTableRow.displayName = 'DataTableRow';\r\nexport default DataTableRow;\r\n","import React from 'react';\r\nimport DataTableRow from \"./DataTableRow\";\r\nimport type {DataTableTBodyProps} from \"./types\";\r\n\r\n\r\nfunction DataTableTBody<T = unknown>({\r\n                                         data,\r\n                                         keyField,\r\n                                         rowClassName,\r\n                                         renderRow,\r\n                                         onSelectRow,\r\n                                         selected = '',\r\n                                         children,\r\n                                         ...rest\r\n                                     }: DataTableTBodyProps<T>) {\r\n    return (\r\n        <tbody {...rest}>\r\n        {data.map(row => {\r\n            const keyValue = String(typeof keyField === \"function\" ? keyField(row) : row[keyField]);\r\n            const isSelected = typeof selected === 'function' ? selected(row) : keyValue === selected;\r\n            if (renderRow) {\r\n                return renderRow(row);\r\n            }\r\n            return (\r\n                <DataTableRow key={keyValue} onClick={onSelectRow}\r\n                              rowClassName={rowClassName}\r\n                              row={row} selected={isSelected}/>\r\n            )\r\n        })}\r\n        {children}\r\n        </tbody>\r\n    )\r\n}\r\n\r\nDataTableTBody.displayName = 'DataTableTBody';\r\nexport default DataTableTBody\r\n","import React from \"react\";\r\nimport classNames from \"classnames\";\r\nimport DataTableTH from \"./DataTableTH\";\r\nimport type {SortableTableTHProps, UIFlexAlign} from \"./types\";\r\nimport styled from '@emotion/styled';\r\nimport clsx from \"clsx\";\r\n\r\nconst flexJustifyContent = (align?: UIFlexAlign) => {\r\n    if (!align) {\r\n        return 'flex-start';\r\n    }\r\n    switch (align) {\r\n        case 'end':\r\n            return 'flex-end';\r\n        default:\r\n            return 'center';\r\n    }\r\n}\r\n\r\ntype FieldTitleProps = {\r\n    sorted?: boolean;\r\n    align?: UIFlexAlign;\r\n};\r\nconst FieldTitle = styled.div<FieldTitleProps>`\r\n    display: flex;\r\n    width: 100%;\r\n    flex-direction: ${props => props.align === 'end' ? 'row-reverse' : 'row'};\r\n    justify-content: ${props => flexJustifyContent(props.align)};\r\n\r\n    .sort-icon {\r\n        flex-grow: ${props => props.align === 'end' ? '1' : '0'};\r\n        opacity: ${props => props.sorted ? 1 : 0};\r\n    }\r\n\r\n    &:hover .sort-icon {\r\n        color: ${props => props.sorted ? 'unset' : 'var(--bs-primary)'};\r\n        opacity: 0.75;\r\n        transition: opacity 0.2s;\r\n    }\r\n`\r\n\r\nfunction SortableTableTH<T = unknown>({\r\n                                          field,\r\n                                          sorted,\r\n                                          ascending,\r\n                                          className,\r\n                                          onClick\r\n                                      }: SortableTableTHProps<T>) {\r\n    if (!field.sortable) {\r\n        return (<DataTableTH field={field} className={className}/>)\r\n    }\r\n\r\n    const {className: _thClassName, ...thProps} = field.thProps ?? {};\r\n    const thClassName = clsx(\r\n        className,\r\n        _thClassName,\r\n        {[`text-${field.align}`]: !!field.align}\r\n    );\r\n\r\n    const clickHandler = () => {\r\n        onClick({field: field.field, ascending: !sorted ? true : !ascending});\r\n    }\r\n\r\n    const iconClassName = {\r\n        'bi-arrow-down': ascending,\r\n        'bi-arrow-up': !ascending,\r\n    }\r\n\r\n    return (\r\n        <th {...thProps} className={clsx(\"sortable\", thClassName)} scope=\"col\" onClick={clickHandler}>\r\n            <FieldTitle sorted={sorted} align={field.align}>\r\n                <div className=\"field-title\">{field.title}</div>\r\n                <div className={clsx('me-1 sort-icon', iconClassName)}/>\r\n            </FieldTitle>\r\n        </th>\r\n    )\r\n}\r\n\r\nSortableTableTH.displayName = 'SortableTableTH';\r\nexport default SortableTableTH;\r\n","import React from \"react\";\r\nimport SortableTableTH from \"./SortableTableTH\";\r\nimport type {SortableTableHeadProps} from \"./types\";\r\nimport clsx from \"clsx\";\r\nimport {useTableFields} from \"./TableProvider\";\r\n\r\n\r\nfunction SortableTableHead<T = unknown>({\r\n                                            currentSort,\r\n                                            onChangeSort,\r\n                                        }: SortableTableHeadProps<T>) {\r\n    const fields = useTableFields<T>()\r\n    const {field, ascending} = currentSort;\r\n    return (\r\n        <thead>\r\n        <tr>\r\n            {fields.map((tableField, index) => (\r\n                <SortableTableTH<T> key={index} field={tableField}\r\n                                    sorted={field === tableField.field} ascending={ascending}\r\n                                    className={clsx(\r\n                                        typeof tableField.className === 'function'\r\n                                            ? {[`text-${tableField.align}`]: !!tableField.align}\r\n                                            : tableField.className\r\n                                    )} onClick={onChangeSort}/>\r\n            ))}\r\n        </tr>\r\n        </thead>\r\n    )\r\n}\r\n\r\nSortableTableHead.displayName = 'SortableTableHead';\r\nexport default SortableTableHead;\r\n","import type {SortableTableProps} from \"./types\";\r\nimport clsx from \"clsx\";\r\nimport Table from \"./Table\";\r\nimport {DataTableCols, DataTableTBody} from \"./index\";\r\nimport SortableTableHead from \"./SortableTableHead\";\r\nimport React from \"react\";\r\n\r\n\r\nexport default function SortableTableWithContext<T = unknown>({\r\n                                                                  className,\r\n                                                                  size,\r\n                                                                  responsive,\r\n                                                                  sticky,\r\n                                                                  data,\r\n                                                                  keyField,\r\n                                                                  rowClassName,\r\n                                                                  renderRow,\r\n                                                                  onSelectRow,\r\n                                                                  selected,\r\n                                                                  tableHeadProps,\r\n                                                                  children,\r\n                                                                  tfoot,\r\n                                                                  currentSort,\r\n                                                                  onChangeSort,\r\n                                                                  ...rest\r\n                                                              }: Omit<SortableTableProps<T>, 'fields'>) {\r\n    const tableClassName = clsx('table', className, {\r\n        [`table-${size}`]: !!size,\r\n    })\r\n\r\n    return (\r\n        <Table className={tableClassName} responsive={responsive} sticky={sticky} {...rest}>\r\n            <DataTableCols/>\r\n            <SortableTableHead currentSort={currentSort} onChangeSort={onChangeSort} {...tableHeadProps}/>\r\n            {!!data.length && (\r\n                <DataTableTBody data={data} keyField={keyField} rowClassName={rowClassName}\r\n                                renderRow={renderRow}\r\n                                onSelectRow={onSelectRow} selected={selected}/>\r\n            )}\r\n            {children}\r\n            {tfoot}\r\n        </Table>\r\n    )\r\n}\r\n","import React from 'react';\r\nimport type {SortableTableProps} from \"./types\";\r\nimport TableProvider from \"./TableProvider\";\r\nimport SortableTableWithContext from \"./SortableTableWithContext\";\r\n\r\n\r\nfunction SortableTable<T = unknown>({\r\n                                        fields,\r\n                                        ...rest\r\n                                    }: SortableTableProps<T>) {\r\n    return (\r\n        <TableProvider initialFields={fields}>\r\n            <SortableTableWithContext {...rest}/>\r\n        </TableProvider>\r\n    )\r\n}\r\n\r\nSortableTable.displayName = 'SortableTable';\r\nexport default SortableTable;\r\n","import React, {ChangeEvent, useId} from 'react';\r\nimport type {RowsPerPageProps} from \"./types\";\r\nimport clsx from \"clsx\";\r\n\r\nconst defaultRowsPerPageValues: number[] = [10, 25, 50, 100, 250, 500, 1000];\r\n\r\nfunction RowsPerPage({\r\n                         value,\r\n                         pageValues = defaultRowsPerPageValues,\r\n                         size,\r\n                         label,\r\n                         className,\r\n                         onChange,\r\n                         ...rest\r\n                     }: RowsPerPageProps) {\r\n    const id = useId();\r\n    const changeHandler = (ev: ChangeEvent<HTMLSelectElement>) => onChange(Number(ev.target.value));\r\n    const selectClassName = className ?? clsx('form-select', {[`form-select-${size}`]: !!size});\r\n    const inputGroupClassName = clsx('input-group', {\r\n        [`input-group-${size}`]: !!size,\r\n    })\r\n\r\n    return (\r\n        <div className={inputGroupClassName} key={value}>\r\n            <label className=\"input-group-text\" htmlFor={id}>{label ?? 'Rows'}</label>\r\n            <select className={selectClassName} id={id}\r\n                    value={value} onChange={changeHandler} {...rest}>\r\n                {pageValues.map(value => (\r\n                    <option key={value} value={value}>{value}</option>\r\n                ))}\r\n            </select>\r\n        </div>\r\n    )\r\n}\r\n\r\nRowsPerPage.displayName = 'RowsPerPage';\r\nexport default RowsPerPage;\r\n","import React from 'react';\r\nimport RowsPerPage from \"./RowsPerPage\";\r\nimport type {TablePaginationProps} from \"./types\";\r\nimport clsx from \"clsx\";\r\n\r\nfunction TablePagination({\r\n                             page,\r\n                             rowsPerPage,\r\n                             onChangePage,\r\n                             count,\r\n                             size,\r\n                             showFirst,\r\n                             showLast,\r\n                             className,\r\n                             rowsPerPageProps,\r\n                             ...rest\r\n                         }: TablePaginationProps) {\r\n\r\n    const first = count === 0 ? 0 : (page * rowsPerPage) + 1;\r\n    const last = Math.min(page * rowsPerPage + rowsPerPage, count);\r\n    const lastPage = rowsPerPage === 0 ? 0 : Math.floor((count - 1) / rowsPerPage);\r\n\r\n    const buttonClassName = clsx(\"btn btn-link\", {[`btn-${size}`]: !!size});\r\n\r\n    return (\r\n        <div className={clsx(\"row g-3 justify-content-end\", className)} {...rest}>\r\n            {!!rowsPerPageProps && (\r\n                <div className=\"col-auto\">\r\n                    <RowsPerPage {...rowsPerPageProps} value={rowsPerPage} size={size}/>\r\n                </div>\r\n            )}\r\n            <div className=\"col-auto\">\r\n                <div className=\"row g-3 flex-nowrap align-items-baseline\">\r\n                    <div className=\"col-auto\">\r\n                        {first}-{last} of {count}\r\n                    </div>\r\n                    {showFirst && (\r\n                        <div className=\"col-auto\">\r\n                            <button className={buttonClassName} disabled={page === 0}\r\n                                    onClick={() => onChangePage(0)} aria-label=\"First page\">\r\n                                <span className=\"bi-chevron-bar-left\" aria-hidden=\"true\"/>\r\n                            </button>\r\n                        </div>\r\n                    )}\r\n                    <div className=\"col-auto\">\r\n                        <button className={buttonClassName} disabled={page === 0}\r\n                                onClick={() => onChangePage(page - 1)} aria-label=\"Previous page\">\r\n                            <span className=\"bi-chevron-left\" aria-hidden=\"true\"/>\r\n                        </button>\r\n                    </div>\r\n                    <div className=\"col-auto\">\r\n                        <button className={buttonClassName} disabled={page >= lastPage}\r\n                                onClick={() => onChangePage(page + 1)} aria-label=\"Next page\">\r\n                            <span className=\"bi-chevron-right\" aria-hidden=\"true\"/>\r\n                        </button>\r\n                    </div>\r\n                    {showLast && (\r\n                        <div className=\"col-auto\">\r\n                            <button className={buttonClassName} disabled={page >= lastPage}\r\n                                    onClick={() => onChangePage(lastPage)} aria-label=\"Last page\">\r\n                                <span className=\"bi-chevron-bar-right\" aria-hidden=\"true\"/>\r\n                            </button>\r\n                        </div>\r\n                    )}\r\n                </div>\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n\r\nTablePagination.displayname = 'TablePagination';\r\nexport default TablePagination\r\n","import styled from \"@emotion/styled\";\r\nimport clsx from \"clsx\";\r\nimport {useTableFields} from \"./TableProvider\";\r\n\r\nconst TableCol = styled.col`\r\n    &.col-collapsed {\r\n        visibility: collapse;\r\n    }\r\n`\r\n\r\nfunction DataTableCols() {\r\n    const fields = useTableFields()\r\n    return (\r\n        <colgroup>\r\n            {fields.map((field, index) => (\r\n                <TableCol key={index}\r\n                          className={clsx(field.colClassName, {'col-collapsed': field.collapse})}\r\n                          span={field.colSpan ?? 1}/>\r\n            ))}\r\n        </colgroup>\r\n    )\r\n}\r\n\r\nDataTableCols.displayName = 'DataTableCols';\r\nexport default DataTableCols;\r\n"],"names":["DataTableContext","createContext","TableProvider","children","initialFields","fields","setFieldsState","useState","setFields","useCallback","updateField","key","arg","nextState","field","getField","value","useMemo","jsx","useTableContext","context","useContext","useTableFields","useField","useHasTableFieldsContext","r","e","t","f","o","clsx","StyledTable","styled","props","Table","React","sticky","responsive","className","rest","ref","_className","DataTableTH","thClassName","DataTableHead","index","DataTableWithContext","size","data","keyField","rowClassName","renderRow","onSelectRow","selected","tableHeadProps","tfoot","tableClassName","DataTableCols","DataTableTBody","DataTable","DataTableCell","row","as","cellClassName","createElement","DataTableRow","trRef","onClick","clickHandler","ev","jsxs","keyValue","isSelected","flexJustifyContent","align","FieldTitle","SortableTableTH","sorted","ascending","_thClassName","thProps","iconClassName","SortableTableHead","currentSort","onChangeSort","tableField","SortableTableWithContext","SortableTable","defaultRowsPerPageValues","RowsPerPage","pageValues","label","onChange","id","useId","changeHandler","selectClassName","inputGroupClassName","TablePagination","page","rowsPerPage","onChangePage","count","showFirst","showLast","rowsPerPageProps","first","last","lastPage","buttonClassName","TableCol"],"mappings":"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","x_google_ignoreList":[1]}

package/dist/types.d.ts

@@ -1,12 +1,12 @@
 import { default as React, HTMLAttributes, MouseEvent, ReactNode, TableHTMLAttributes } from 'react';
-import { Argument } from 'classnames';
+import { ClassValue } from 'clsx';
 export interface SortProps<T = unknown> {
     field: keyof T;
     ascending: boolean;
 }
 export type UISize = 'sm' | 'lg' | '';
 export type UITableSize = UISize | 'xs';
-export type DataTableClassNames<T = unknown> = string | Argument | ((row: T) => (string | Argument));
+export type DataTableClassNames<T = unknown> = string | ClassValue | ((row: T) => (string | ClassValue));
 export type UIFlexAlign = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
 export interface DataTableField<T = unknown> {
     id?: number | string;
@@ -19,10 +19,11 @@ export interface DataTableField<T = unknown> {
     colSpan?: number;
     thProps?: Omit<DataTableTHProps<T>, 'field'>;
     cellProps?: TableHTMLAttributes<HTMLTableCellElement>;
-}
-export interface SortableTableField<T = unknown> extends DataTableField<T> {
+    collapse?: boolean;
+    colClassName?: string;
     sortable?: boolean;
 }
+export type SortableTableField<T = unknown> = DataTableField<T>;
 export interface DataTableProps<T = unknown> extends TableHTMLAttributes<HTMLTableElement> {
     fields: DataTableField<T>[];
     data: T[];
@@ -35,24 +36,20 @@ export interface DataTableProps<T = unknown> extends TableHTMLAttributes<HTMLTab
     onSelectRow?: (row: T, ev?: MouseEvent<HTMLTableRowElement>) => void;
     selected?: string | number | ((row: T) => boolean);
     tfoot?: React.ReactElement<HTMLTableSectionElement>;
-    tableHeadProps?: DataTableHeadProps<T>;
+    tableHeadProps?: TableHTMLAttributes<HTMLTableSectionElement>;
     children?: ReactNode;
 }
 export interface DataTableCellProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTableCellElement>, 'className'> {
     field: DataTableField<T>;
     row: T;
     as?: 'td' | 'th';
-    className?: string | Argument;
+    className?: string | ClassValue;
     children?: React.ReactNode;
 }
 export interface DataTableTHProps<T = unknown> extends Omit<DataTableCellProps<T>, 'row'> {
     as?: 'th';
 }
-export interface DataTableHeadProps<T = unknown> extends TableHTMLAttributes<HTMLTableSectionElement> {
-    fields: DataTableField<T>[];
-}
 export interface DataTableTBodyProps<T = unknown> extends TableHTMLAttributes<HTMLTableSectionElement> {
-    fields: DataTableField<T>[];
     data: T[];
     keyField: keyof T | ((row: T) => string | number);
     rowClassName?: DataTableClassNames<T>;
@@ -62,25 +59,23 @@ export interface DataTableTBodyProps<T = unknown> extends TableHTMLAttributes<HT
     children?: ReactNode;
 }
 export interface DataTableRowProps<T = unknown> extends Omit<TableHTMLAttributes<HTMLTableRowElement>, 'onClick'> {
-    rowClassName?: string | Argument | ((row: T) => string | Argument);
+    rowClassName?: string | ClassValue | ((row: T) => string | ClassValue);
     selected?: boolean;
-    fields: DataTableField<T>[];
     row: T;
     trRef?: React.Ref<HTMLTableRowElement>;
     onClick?: (row: T, ev?: MouseEvent<HTMLTableRowElement>) => void;
 }
 export interface SortableTableProps<T = unknown> extends DataTableProps<T> {
-    fields: SortableTableField<T>[];
+    fields: DataTableField<T>[];
     currentSort: SortProps<T>;
     onChangeSort: (sort: SortProps<T>) => void;
 }
-export interface SortableTableHeadProps<T = unknown> extends DataTableHeadProps<T> {
+export interface SortableTableHeadProps<T = unknown> extends TableHTMLAttributes<HTMLTableSectionElement> {
     currentSort: SortProps<T>;
-    fields: SortableTableField<T>[];
     onChangeSort: (sort: SortProps<T>) => void;
 }
 export interface SortableTableTHProps<T = unknown> extends Omit<DataTableTHProps<T>, 'onClick'> {
-    field: SortableTableField<T>;
+    field: DataTableField<T>;
     sorted?: boolean;
     ascending?: boolean;
     onClick: (sort: SortProps<T>) => void;
@@ -103,3 +98,6 @@ export interface TablePaginationProps extends HTMLAttributes<HTMLDivElement> {
     showLast?: boolean;
     rowsPerPageProps?: Omit<RowsPerPageProps, 'value'>;
 }
+export interface DataTableColProps<T = unknown> extends TableHTMLAttributes<HTMLTableSectionElement> {
+    fields: DataTableField<T>[];
+}

package/eslint.config.mjs

@@ -3,16 +3,16 @@ import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
-import { globalIgnores } from 'eslint/config'
+import { defineConfig, globalIgnores } from 'eslint/config'
 
-export default tseslint.config([
+export default defineConfig([
     globalIgnores(['dist']),
     {
         files: ['**/*.{ts,tsx}'],
         extends: [
             js.configs.recommended,
             tseslint.configs.recommended,
-            reactHooks.configs['recommended-latest'],
+            reactHooks.configs.flat.recommended,
             reactRefresh.configs.vite,
         ],
         languageOptions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chumsinc/sortable-tables",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "type": "module",
   "source": "./src/index.tsx",
   "main": "./dist/index.umd.js",
@@ -20,7 +20,6 @@
   },
   "peerDependencies": {
     "@emotion/styled": "^11.14.0",
-    "classnames": "*",
     "react": ">=18.1.0",
     "react-dom": ">=18.1.0"
   },
@@ -46,7 +45,7 @@
   "devDependencies": {
     "@emotion/styled": "^11.14.0",
     "@eslint/js": "^9.8.0",
-    "@types/node": "^22.1.0",
+    "@types/node": "^25.0.2",
     "@types/numeral": "^2.0.3",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
@@ -92,5 +91,8 @@
   "keywords": [
     "Bootstrap",
     "Table"
-  ]
+  ],
+  "dependencies": {
+    "clsx": "^2.1.1"
+  }
 }

package/src/DataTable.tsx

@@ -1,44 +1,16 @@
-import React from 'react';
-import classNames from "classnames";
-import DataTableHead from "./DataTableHead";
-import DataTableTBody from "./DataTableTBody";
 import type {DataTableProps} from "./types";
-import Table from "./Table";
+import TableProvider from "./TableProvider";
+import DataTableWithContext from "./DataTableWithContext";
 
 
 function DataTable<T = unknown>({
                                     fields,
-                                    data,
-                                    keyField,
-                                    size = '',
-                                    sticky,
-                                    responsive,
-                                    rowClassName,
-                                    renderRow,
-                                    onSelectRow,
-                                    selected = '',
-                                    className = '',
-                                    tfoot,
-                                    children,
-                                    tableHeadProps,
                                     ...rest
                                 }: DataTableProps<T>) {
-
-    const tableClassName = classNames('table', className, {
-        [`table-${size}`]: !!size,
-    })
-
     return (
-        <Table sticky={sticky} responsive={responsive} className={tableClassName} {...rest}>
-            <DataTableHead {...tableHeadProps} fields={fields}/>
-            {!!data.length && (
-                <DataTableTBody fields={fields} data={data} keyField={keyField} rowClassName={rowClassName}
-                                renderRow={renderRow}
-                                onSelectRow={onSelectRow} selected={selected}/>
-            )}
-            {children}
-            {tfoot}
-        </Table>
+        <TableProvider initialFields={fields}>
+            <DataTableWithContext {...rest}/>
+        </TableProvider>
     )
 }
 

package/src/DataTableCell.tsx

@@ -1,14 +1,14 @@
-import React, {ReactNode} from 'react';
+import {createElement, ReactNode} from 'react';
 import type {DataTableCellProps} from "./types";
-import classNames from "classnames";
+import clsx from "clsx";
 
-export default function DataTableCell<T = unknown>({field, row, className, as, ...rest}:DataTableCellProps<T>) {
-    const cellClassName = classNames(
+export default function DataTableCell<T = unknown>({field, row, className, as, ...rest}: DataTableCellProps<T>) {
+    const cellClassName = clsx(
         {[`text-${field.align}`]: !!field.align},
         className,
         typeof field.className === 'function' ? field.className(row) : field.className
     );
-    return React.createElement(
+    return createElement(
         (as ?? field.as) ?? 'td',
         {
             className: cellClassName,

package/src/DataTableCols.tsx

@@ -0,0 +1,25 @@
+import styled from "@emotion/styled";
+import clsx from "clsx";
+import {useTableFields} from "./TableProvider";
+
+const TableCol = styled.col`
+    &.col-collapsed {
+        visibility: collapse;
+    }
+`
+
+function DataTableCols() {
+    const fields = useTableFields()
+    return (
+        <colgroup>
+            {fields.map((field, index) => (
+                <TableCol key={index}
+                          className={clsx(field.colClassName, {'col-collapsed': field.collapse})}
+                          span={field.colSpan ?? 1}/>
+            ))}
+        </colgroup>
+    )
+}
+
+DataTableCols.displayName = 'DataTableCols';
+export default DataTableCols;

package/src/DataTableHead.tsx

@@ -1,10 +1,11 @@
-import React from "react";
+import React, {type TableHTMLAttributes} from "react";
 import DataTableTH from "./DataTableTH";
-import classNames from "classnames";
-import type {DataTableHeadProps} from "./types";
+import clsx from "clsx";
+import {useTableFields} from "./TableProvider";
 
 
-function DataTableHead<T = unknown>({fields, ...rest}: DataTableHeadProps<T>) {
+function DataTableHead<T = unknown>({...rest}: TableHTMLAttributes<HTMLTableSectionElement>) {
+    const fields = useTableFields<T>()
     return (
         <thead {...rest}>
         <tr>
@@ -12,7 +13,7 @@ function DataTableHead<T = unknown>({fields, ...rest}: DataTableHeadProps<T>) {
                 <DataTableTH key={field.id ?? index}
                              {...field.thProps}
                              field={field}
-                             className={classNames(
+                             className={clsx(
                                  typeof field.className === 'function'
                                      ? {[`text-${field.align}`]: !!field.align}
                                      : field.className

package/src/DataTableRow.tsx

@@ -1,19 +1,20 @@
 import React, {MouseEvent} from 'react';
-import classNames from "classnames";
 import type {DataTableRowProps} from "./types";
 import DataTableCell from "./DataTableCell";
+import clsx from "clsx";
+import {useTableFields} from "./TableProvider";
 
 
 function DataTableRow<T = unknown>({
                                        className,
                                        rowClassName,
                                        selected,
-                                       fields,
                                        row,
                                        trRef,
                                        onClick,
                                        ...rest
                                    }: DataTableRowProps<T>) {
+    const fields = useTableFields<T>()
     const clickHandler = (ev: MouseEvent<HTMLTableRowElement>) => {
         onClick?.(row, ev)
     }
@@ -25,10 +26,10 @@ function DataTableRow<T = unknown>({
 
     return (
         <tr ref={trRef}
-            className={classNames({'table-active': selected}, className, _className)}
+            className={clsx({'table-active': selected}, className, _className)}
             onClick={clickHandler}
             {...rest}>
-            {fields.map((field, index) => (<DataTableCell key={index} field={field} row={row}/>))}
+            {fields.map((field, index) => (<DataTableCell key={field?.id ?? index} field={field} row={row}/>))}
         </tr>
     )
 }

package/src/DataTableTBody.tsx

@@ -4,7 +4,6 @@ import type {DataTableTBodyProps} from "./types";
 
 
 function DataTableTBody<T = unknown>({
-                                         fields,
                                          data,
                                          keyField,
                                          rowClassName,
@@ -25,7 +24,6 @@ function DataTableTBody<T = unknown>({
             return (
                 <DataTableRow key={keyValue} onClick={onSelectRow}
                               rowClassName={rowClassName}
-                              fields={fields}
                               row={row} selected={isSelected}/>
             )
         })}

package/src/DataTableTH.tsx

@@ -1,20 +1,21 @@
 import React from "react";
-import classNames from "classnames";
 import type {DataTableTHProps} from "./types";
+import clsx from "clsx";
 
 
 function DataTableTH<T = unknown>({
-                                                     field,
-                                                     className,
-                                                     children,
-                                                     ...rest
-                                                 }: DataTableTHProps<T>) {
-    const thClassName = classNames({[`text-${field.align}`]: !!field.align}, className);
+                                      field,
+                                      className,
+                                      children,
+                                      ...rest
+                                  }: DataTableTHProps<T>) {
+    const thClassName = clsx({[`text-${field.align}`]: !!field.align}, className);
     return (
         <th className={thClassName} scope="col" {...rest}>
             {children ?? field.title}
         </th>
     )
 }
+
 DataTableTH.displayName = 'DataTableTH';
 export default DataTableTH;

package/src/DataTableWithContext.tsx

@@ -0,0 +1,41 @@
+import type {DataTableProps} from "./types";
+import clsx from "clsx";
+import Table from "./Table";
+import {DataTableCols, DataTableTBody} from "./index";
+import DataTableHead from "./DataTableHead";
+
+
+export default function DataTableWithContext<T = unknown>({
+                                                              className,
+                                                              size,
+                                                              responsive,
+                                                              sticky,
+                                                              data,
+                                                              keyField,
+                                                              rowClassName,
+                                                              renderRow,
+                                                              onSelectRow,
+                                                              selected,
+                                                              tableHeadProps,
+                                                              children,
+                                                              tfoot,
+                                                              ...rest
+                                                          }: Omit<DataTableProps<T>, 'fields'>) {
+    const tableClassName = clsx('table', className, {
+        [`table-${size}`]: !!size,
+    })
+
+    return (
+        <Table sticky={sticky} responsive={responsive} className={tableClassName} {...rest}>
+            <DataTableCols/>
+            <DataTableHead {...tableHeadProps}/>
+            {!!data.length && (
+                <DataTableTBody data={data} keyField={keyField} rowClassName={rowClassName}
+                                renderRow={renderRow}
+                                onSelectRow={onSelectRow} selected={selected}/>
+            )}
+            {children}
+            {tfoot}
+        </Table>
+    )
+}

package/src/RowsPerPage.tsx

@@ -1,9 +1,8 @@
 import React, {ChangeEvent, useId} from 'react';
-import classNames from "classnames";
 import type {RowsPerPageProps} from "./types";
+import clsx from "clsx";
 
-export const defaultRowsPerPageValues: number[] = [10, 25, 50, 100, 250, 500, 1000];
-
+const defaultRowsPerPageValues: number[] = [10, 25, 50, 100, 250, 500, 1000];
 
 function RowsPerPage({
                          value,
@@ -16,8 +15,8 @@ function RowsPerPage({
                      }: RowsPerPageProps) {
     const id = useId();
     const changeHandler = (ev: ChangeEvent<HTMLSelectElement>) => onChange(Number(ev.target.value));
-    const selectClassName = className ?? classNames('form-select', {[`form-select-${size}`]: !!size});
-    const inputGroupClassName = classNames('input-group', {
+    const selectClassName = className ?? clsx('form-select', {[`form-select-${size}`]: !!size});
+    const inputGroupClassName = clsx('input-group', {
         [`input-group-${size}`]: !!size,
     })