react-science 11.1.0 → 11.2.0

package/lib/components/table/table_header.d.ts

@@ -1,7 +1,9 @@
 import type { Header, RowData } from '@tanstack/react-table';
+import type { HeaderCellRenderer } from './table_header_cell.js';
 interface TableHeaderProps<TData extends RowData> {
     headers: Array<Header<TData, unknown>>;
     sticky: boolean;
+    renderHeaderCell?: HeaderCellRenderer<TData>;
 }
 export declare function TableHeader<TData extends RowData>(props: TableHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/table/table_header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table_header.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAY7D,UAAU,gBAAgB,CAAC,KAAK,SAAS,OAAO;IAC9C,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IACvC,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,WAAW,CAAC,KAAK,SAAS,OAAO,EAC/C,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,2CAY/B"}
+{"version":3,"file":"table_header.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAG7D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAUjE,UAAU,gBAAgB,CAAC,KAAK,SAAS,OAAO;IAC9C,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IACvC,MAAM,EAAE,OAAO,CAAC;IAChB,gBAAgB,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;CAC9C;AAED,wBAAgB,WAAW,CAAC,KAAK,SAAS,OAAO,EAC/C,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,2CAgB/B"}

package/lib/components/table/table_header.js

@@ -7,7 +7,7 @@ const headerStyle = {
     backgroundColor: 'white',
 };
 export function TableHeader(props) {
-    const { headers, sticky } = props;
-    return (_jsx("thead", { style: sticky ? headerStyle : undefined, children: _jsx("tr", { children: headers.map((header) => (_jsx(TableHeaderCell, { header: header }, header.id))) }) }));
+    const { headers, sticky, renderHeaderCell } = props;
+    return (_jsx("thead", { style: sticky ? headerStyle : undefined, children: _jsx("tr", { children: headers.map((header) => (_jsx(TableHeaderCell, { header: header, renderHeaderCell: renderHeaderCell }, header.id))) }) }));
 }
 //# sourceMappingURL=table_header.js.map

package/lib/components/table/table_header.js.map

@@ -1 +1 @@
-{"version":3,"file":"table_header.js","sourceRoot":"","sources":["../../../src/components/table/table_header.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,MAAM,WAAW,GAAkB;IACjC,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,EAAE;IACV,eAAe,EAAE,OAAO;CACzB,CAAC;AAOF,MAAM,UAAU,WAAW,CACzB,KAA8B;IAE9B,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAClC,OAAO,CACL,gBAAO,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,YAC5C,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,KAAC,eAAe,IAAiB,MAAM,EAAE,MAAM,IAAzB,MAAM,CAAC,EAAE,CAAoB,CACpD,CAAC,GACC,GACC,CACT,CAAC;AACJ,CAAC"}
+{"version":3,"file":"table_header.js","sourceRoot":"","sources":["../../../src/components/table/table_header.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,MAAM,WAAW,GAAkB;IACjC,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,EAAE;IACV,eAAe,EAAE,OAAO;CACzB,CAAC;AAQF,MAAM,UAAU,WAAW,CACzB,KAA8B;IAE9B,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IACpD,OAAO,CACL,gBAAO,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,YAC5C,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,KAAC,eAAe,IAEd,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,gBAAgB,IAF7B,MAAM,CAAC,EAAE,CAGd,CACH,CAAC,GACC,GACC,CACT,CAAC;AACJ,CAAC"}

package/lib/components/table/table_header_cell.d.ts

@@ -1,7 +1,11 @@
 import type { Header, RowData } from '@tanstack/react-table';
+import type { HTMLAttributes, ReactNode } from 'react';
+type ThProps = Pick<HTMLAttributes<HTMLTableCellElement>, 'style' | 'onClick' | 'children'>;
+export type HeaderCellRenderer<TData extends RowData> = (thProps: ThProps, header: Header<TData, unknown>) => ReactNode;
 interface TableHeaderCellProps<TData extends RowData> {
     header: Header<TData, unknown>;
+    renderHeaderCell?: HeaderCellRenderer<TData>;
 }
-export declare function TableHeaderCell<TData extends RowData>(props: TableHeaderCellProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function TableHeaderCell<TData extends RowData>(props: TableHeaderCellProps<TData>): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};
 //# sourceMappingURL=table_header_cell.d.ts.map

package/lib/components/table/table_header_cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table_header_cell.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_header_cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAI7D,UAAU,oBAAoB,CAAC,KAAK,SAAS,OAAO;IAClD,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;CAChC;AAED,wBAAgB,eAAe,CAAC,KAAK,SAAS,OAAO,EACnD,KAAK,EAAE,oBAAoB,CAAC,KAAK,CAAC,2CA6BnC"}
+{"version":3,"file":"table_header_cell.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_header_cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,KAAK,EAAiB,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtE,KAAK,OAAO,GAAG,IAAI,CACjB,cAAc,CAAC,oBAAoB,CAAC,EACpC,OAAO,GAAG,SAAS,GAAG,UAAU,CACjC,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,KAAK,SAAS,OAAO,IAAI,CACtD,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,KAC3B,SAAS,CAAC;AAEf,UAAU,oBAAoB,CAAC,KAAK,SAAS,OAAO;IAClD,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAC/B,gBAAgB,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;CAC9C;AAED,wBAAgB,eAAe,CAAC,KAAK,SAAS,OAAO,EACnD,KAAK,EAAE,oBAAoB,CAAC,KAAK,CAAC,gHASnC"}

package/lib/components/table/table_header_cell.js

@@ -1,19 +1,27 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { flexRender } from '@tanstack/react-table';
 export function TableHeaderCell(props) {
-    const { header } = props;
-    const column = header.column;
-    const canSort = column.getCanSort();
-    const sorted = column.getIsSorted();
+    const { header, renderHeaderCell } = props;
+    const thProps = getThProps(header);
+    if (renderHeaderCell) {
+        return renderHeaderCell(thProps, header);
+    }
+    return _jsx("th", { ...thProps });
+}
+function getThProps(header) {
+    const sorted = header.column.getIsSorted();
+    const canSort = header.column.getCanSort();
     const style = {
         position: 'relative',
         cursor: canSort ? 'pointer' : undefined,
     };
-    return (_jsx("th", { style: style, onClick: canSort ? column.getToggleSortingHandler() : undefined, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '5px' }, children: [flexRender(header.column.columnDef.header, header.getContext()), sorted
-                    ? {
-                        asc: '🔼',
-                        desc: '🔽',
-                    }[sorted]
-                    : null] }) }));
+    const onClick = canSort ? header.column.getToggleSortingHandler() : undefined;
+    const children = (_jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '5px' }, children: [_jsx("div", { children: flexRender(header.column.columnDef.header, header.getContext()) }), sorted
+                ? {
+                    asc: '🔼',
+                    desc: '🔽',
+                }[sorted]
+                : null] }));
+    return { style, children, onClick };
 }
 //# sourceMappingURL=table_header_cell.js.map

package/lib/components/table/table_header_cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"table_header_cell.js","sourceRoot":"","sources":["../../../src/components/table/table_header_cell.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAOnD,MAAM,UAAU,eAAe,CAC7B,KAAkC;IAElC,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;IAE7B,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;IACpC,MAAM,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE,CAAC;IAEpC,MAAM,KAAK,GAAkB;QAC3B,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;KACxC,CAAC;IAEF,OAAO,CACL,aACE,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAC,SAAS,YAE/D,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,aAC9D,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,EAC/D,MAAM;oBACL,CAAC,CAAC;wBACE,GAAG,EAAE,IAAI;wBACT,IAAI,EAAE,IAAI;qBACX,CAAC,MAAM,CAAC;oBACX,CAAC,CAAC,IAAI,IACJ,GACH,CACN,CAAC;AACJ,CAAC"}
+{"version":3,"file":"table_header_cell.js","sourceRoot":"","sources":["../../../src/components/table/table_header_cell.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAkBnD,MAAM,UAAU,eAAe,CAC7B,KAAkC;IAElC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IAC3C,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;IAEnC,IAAI,gBAAgB,EAAE,CAAC;QACrB,OAAO,gBAAgB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAC3C,CAAC;IACD,OAAO,gBAAQ,OAAO,GAAI,CAAC;AAC7B,CAAC;AAED,SAAS,UAAU,CACjB,MAA8B;IAE9B,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;IAC3C,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,KAAK,GAAkB;QAC3B,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;KACxC,CAAC;IACF,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAC9E,MAAM,QAAQ,GAAG,CACf,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,aAC/D,wBACG,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,GAC5D,EACL,MAAM;gBACL,CAAC,CAAC;oBACE,GAAG,EAAE,IAAI;oBACT,IAAI,EAAE,IAAI;iBACX,CAAC,MAAM,CAAC;gBACX,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;IAEF,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;AACtC,CAAC"}

package/lib/components/table/table_root.d.ts

@@ -1,6 +1,7 @@
 /** @jsxImportSource @emotion/react */
 import type { RowData, TableOptions } from '@tanstack/react-table';
 import type { TableHTMLAttributes } from 'react';
+import type { HeaderCellRenderer } from './table_header_cell.js';
 import type { TableColumnDef, TableRowTrRenderer } from './table_utils.js';
 interface TableBaseProps<TData extends RowData> {
     data: TData[];
@@ -42,6 +43,10 @@ interface TableBaseProps<TData extends RowData> {
      * Make sure to spread the passed `trProps` onto the rendered `<tr>` element.
      */
     renderRowTr?: TableRowTrRenderer<TData>;
+    /**
+     * Override the columns' header cell rendering.
+     */
+    renderHeaderCell?: HeaderCellRenderer<TData>;
 }
 interface RegularTableProps<TData extends RowData> extends TableBaseProps<TData> {
     virtualizeRows?: false | undefined;

package/lib/components/table/table_root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table_root.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_root.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AAItC,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAOnE,OAAO,KAAK,EAAwB,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAKvE,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAc3E,UAAU,cAAc,CAAC,KAAK,SAAS,OAAO;IAC5C,IAAI,EAAE,KAAK,EAAE,CAAC;IACd;;OAEG;IAEH,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;IAC3C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,UAAU,CAAC,EAAE,IAAI,CACf,YAAY,CAAC,KAAK,CAAC,EACnB,MAAM,GAAG,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAC7D,CAAC;IACF,UAAU,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAC;IACrE;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;CACzC;AAED,UAAU,iBAAiB,CAAC,KAAK,SAAS,OAAO,CAC/C,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC7B,cAAc,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;CACpC;AAED,UAAU,qBAAqB,CAAC,KAAK,SAAS,OAAO,CACnD,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC7B,cAAc,EAAE,IAAI,CAAC;IACrB;;;;OAIG;IACH,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AAED,MAAM,MAAM,UAAU,CAAC,KAAK,SAAS,OAAO,IACxC,iBAAiB,CAAC,KAAK,CAAC,GACxB,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAEjC,wBAAgB,KAAK,CAAC,KAAK,SAAS,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,oDAwDpE"}
+{"version":3,"file":"table_root.d.ts","sourceRoot":"","sources":["../../../src/components/table/table_root.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AAItC,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAOnE,OAAO,KAAK,EAAwB,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAKvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAc3E,UAAU,cAAc,CAAC,KAAK,SAAS,OAAO;IAC5C,IAAI,EAAE,KAAK,EAAE,CAAC;IACd;;OAEG;IAEH,OAAO,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;IAC3C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,UAAU,CAAC,EAAE,IAAI,CACf,YAAY,CAAC,KAAK,CAAC,EACnB,MAAM,GAAG,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAC7D,CAAC;IACF,UAAU,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAC;IACrE;;;OAGG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACxC;;OAEG;IACH,gBAAgB,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;CAC9C;AAED,UAAU,iBAAiB,CAAC,KAAK,SAAS,OAAO,CAC/C,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC7B,cAAc,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;CACpC;AAED,UAAU,qBAAqB,CAAC,KAAK,SAAS,OAAO,CACnD,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC7B,cAAc,EAAE,IAAI,CAAC;IACrB;;;;OAIG;IACH,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AAED,MAAM,MAAM,UAAU,CAAC,KAAK,SAAS,OAAO,IACxC,iBAAiB,CAAC,KAAK,CAAC,GACxB,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAEjC,wBAAgB,KAAK,CAAC,KAAK,SAAS,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,oDA6DpE"}

package/lib/components/table/table_root.js

@@ -18,7 +18,7 @@ const CustomHTMLTable = styled(HTMLTable, {
   }
 `;
 export function Table(props) {
-    const { data, columns, bordered = false, compact = false, interactive = false, striped = false, stickyHeader = false, reactTable, tableProps, renderRowTr, virtualizeRows, } = props;
+    const { data, columns, bordered = false, compact = false, interactive = false, striped = false, stickyHeader = false, reactTable, tableProps, renderRowTr, renderHeaderCell, virtualizeRows, } = props;
     const scrollElementRef = useRef(null);
     const columnDefs = useTableColumns(columns);
     const table = useReactTable({
@@ -35,7 +35,7 @@ export function Table(props) {
         estimateSize: (props.virtualizeRows && props.estimatedRowHeight) || (() => 0),
         overscan: 5,
     });
-    return (_jsx(Container, { virtualizeRows: virtualizeRows, scrollRef: scrollElementRef, children: _jsxs(CustomHTMLTable, { bordered: bordered, compact: compact, interactive: interactive, striped: striped, ...tableProps, children: [_jsx(TableHeader, { sticky: stickyHeader, headers: table.getFlatHeaders() }), _jsx(TableBody, { rows: table.getRowModel().rows, renderRowTr: renderRowTr, virtualizer: tanstackVirtualizer, virtualizeRows: virtualizeRows })] }) }));
+    return (_jsx(Container, { virtualizeRows: virtualizeRows, scrollRef: scrollElementRef, children: _jsxs(CustomHTMLTable, { bordered: bordered, compact: compact, interactive: interactive, striped: striped, ...tableProps, children: [_jsx(TableHeader, { sticky: stickyHeader, headers: table.getFlatHeaders(), renderHeaderCell: renderHeaderCell }), _jsx(TableBody, { rows: table.getRowModel().rows, renderRowTr: renderRowTr, virtualizer: tanstackVirtualizer, virtualizeRows: virtualizeRows })] }) }));
 }
 const ScrollRefDiv = styled.div `
   height: 100%;

package/lib/components/table/table_root.js.map

@@ -1 +1 @@
-{"version":3,"file":"table_root.js","sourceRoot":"","sources":["../../../src/components/table/table_root.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"table_root.js","sourceRoot":"","sources":["../../../src/components/table/table_root.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-science",
-  "version": "11.1.0",
+  "version": "11.2.0",
   "description": "React components to build scientific applications UI",
   "type": "module",
   "exports": {

package/src/components/table/table_header.tsx

@@ -1,6 +1,7 @@
 import type { Header, RowData } from '@tanstack/react-table';
 import type { CSSProperties } from 'react';
 
+import type { HeaderCellRenderer } from './table_header_cell.js';
 import { TableHeaderCell } from './table_header_cell.js';
 
 const headerStyle: CSSProperties = {
@@ -13,17 +14,22 @@ const headerStyle: CSSProperties = {
 interface TableHeaderProps<TData extends RowData> {
   headers: Array<Header<TData, unknown>>;
   sticky: boolean;
+  renderHeaderCell?: HeaderCellRenderer<TData>;
 }
 
 export function TableHeader<TData extends RowData>(
   props: TableHeaderProps<TData>,
 ) {
-  const { headers, sticky } = props;
+  const { headers, sticky, renderHeaderCell } = props;
   return (
     <thead style={sticky ? headerStyle : undefined}>
       <tr>
         {headers.map((header) => (
-          <TableHeaderCell key={header.id} header={header} />
+          <TableHeaderCell
+            key={header.id}
+            header={header}
+            renderHeaderCell={renderHeaderCell}
+          />
         ))}
       </tr>
     </thead>

package/src/components/table/table_header_cell.tsx

@@ -1,39 +1,57 @@
 import type { Header, RowData } from '@tanstack/react-table';
 import { flexRender } from '@tanstack/react-table';
-import type { CSSProperties } from 'react';
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+
+type ThProps = Pick<
+  HTMLAttributes<HTMLTableCellElement>,
+  'style' | 'onClick' | 'children'
+>;
+
+export type HeaderCellRenderer<TData extends RowData> = (
+  thProps: ThProps,
+  header: Header<TData, unknown>,
+) => ReactNode;
 
 interface TableHeaderCellProps<TData extends RowData> {
   header: Header<TData, unknown>;
+  renderHeaderCell?: HeaderCellRenderer<TData>;
 }
 
 export function TableHeaderCell<TData extends RowData>(
   props: TableHeaderCellProps<TData>,
 ) {
-  const { header } = props;
-  const column = header.column;
+  const { header, renderHeaderCell } = props;
+  const thProps = getThProps(header);
 
-  const canSort = column.getCanSort();
-  const sorted = column.getIsSorted();
+  if (renderHeaderCell) {
+    return renderHeaderCell(thProps, header);
+  }
+  return <th {...thProps} />;
+}
 
+function getThProps<TData extends RowData>(
+  header: Header<TData, unknown>,
+): ThProps {
+  const sorted = header.column.getIsSorted();
+  const canSort = header.column.getCanSort();
   const style: CSSProperties = {
     position: 'relative',
     cursor: canSort ? 'pointer' : undefined,
   };
-
-  return (
-    <th
-      style={style}
-      onClick={canSort ? column.getToggleSortingHandler() : undefined}
-    >
-      <div style={{ display: 'flex', flexDirection: 'row', gap: '5px' }}>
+  const onClick = canSort ? header.column.getToggleSortingHandler() : undefined;
+  const children = (
+    <div style={{ display: 'flex', flexDirection: 'row', gap: '5px' }}>
+      <div>
         {flexRender(header.column.columnDef.header, header.getContext())}
-        {sorted
-          ? {
-              asc: '🔼',
-              desc: '🔽',
-            }[sorted]
-          : null}
       </div>
-    </th>
+      {sorted
+        ? {
+            asc: '🔼',
+            desc: '🔽',
+          }[sorted]
+        : null}
+    </div>
   );
+
+  return { style, children, onClick };
 }

package/src/components/table/table_root.tsx

@@ -14,6 +14,7 @@ import { useRef } from 'react';
 
 import { TableBody } from './table_body.js';
 import { TableHeader } from './table_header.js';
+import type { HeaderCellRenderer } from './table_header_cell.js';
 import type { TableColumnDef, TableRowTrRenderer } from './table_utils.js';
 import { useTableColumns } from './use_table_columns.js';
 
@@ -73,6 +74,10 @@ interface TableBaseProps<TData extends RowData> {
    * Make sure to spread the passed `trProps` onto the rendered `<tr>` element.
    */
   renderRowTr?: TableRowTrRenderer<TData>;
+  /**
+   * Override the columns' header cell rendering.
+   */
+  renderHeaderCell?: HeaderCellRenderer<TData>;
 }
 
 interface RegularTableProps<TData extends RowData>
@@ -109,6 +114,7 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
     reactTable,
     tableProps,
     renderRowTr,
+    renderHeaderCell,
 
     virtualizeRows,
   } = props;
@@ -141,7 +147,11 @@ export function Table<TData extends RowData>(props: TableProps<TData>) {
         striped={striped}
         {...tableProps}
       >
-        <TableHeader sticky={stickyHeader} headers={table.getFlatHeaders()} />
+        <TableHeader
+          sticky={stickyHeader}
+          headers={table.getFlatHeaders()}
+          renderHeaderCell={renderHeaderCell}
+        />
         <TableBody
           rows={table.getRowModel().rows}
           renderRowTr={renderRowTr}