@apple-pie/slice 0.1.41 → 0.1.43

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

@@ -6,6 +6,7 @@ export type CellContext<T, V> = {
 };
 export type HeaderContext<T, V> = {
     column: ColumnDefinition<T, V>;
+    sortKey?: SortKey<T>;
 };
 export type ColumnDefinition<T, V = unknown> = {
     id: string;
@@ -15,6 +16,7 @@ export type ColumnDefinition<T, V = unknown> = {
     align?: 'start' | 'center' | 'end';
     padding?: number | string;
     nowrap?: boolean;
+    sort?: keyof T;
     accessor: (row: T) => V;
     renderHeader?: (ctx: HeaderContext<T, V>) => ReactNode;
     renderCell?: (ctx: CellContext<T, V>) => ReactNode;
@@ -29,15 +31,24 @@ export interface DataTableProps<T> {
     freezeColumnBackgroundColor?: string;
     headerBackgroundColor?: string;
     candyStripeBackgroundColor?: string;
+    handleHoverColor?: string;
     borderStyle?: 'box' | 'row' | 'none';
     borderColor?: string;
     tableData?: T[];
+    colResize?: boolean;
+    onColumnResize?: (columnId: string, width: number) => void;
     columnDefinitions: ColumnDefinition<T, any>[];
     getRowId?: (row: T, index: number) => string | number;
     filter?: (row: T, index: number, array: T[]) => boolean;
+    sort?: SortKey<T>;
+    onSortChange?: (sort: SortKey<T>) => void;
     caption?: string;
     onClick?: (col: ColumnDefinition<T>, colId: number, row: T, rowIndex: number) => void;
     onDoubleClick?: (col: ColumnDefinition<T>, colId: number, row: T, rowIndex: number) => void;
     onMouseOver?: (col: ColumnDefinition<T>, colId: number, row: T, rowIndex: number) => void;
     onMouseOut?: (col: ColumnDefinition<T>, colId: number, row: T, rowIndex: number) => void;
 }
+export type SortKey<T> = {
+    key?: keyof T;
+    dir: 'asc' | 'desc';
+} | undefined;

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

@@ -0,0 +1,14 @@
+export type DragColumnElement = {
+    id: string;
+    cell: HTMLElement;
+    col: HTMLTableColElement;
+    handle?: HTMLDivElement | null;
+    parent?: HTMLDivElement | null;
+};
+export declare function useDragColumn(element: DragColumnElement | null, onResizeEnd?: (id: string, width: number) => void): {
+    client: {
+        x: number;
+        y: number;
+    } | null;
+    dragging: boolean;
+};

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

@@ -3,3 +3,8 @@ export declare function createColumnHelper<T>(): {
     accessor<V>(accessor: (row: T) => V, def: Omit<ColumnDefinition<T, V>, "accessor">): ColumnDefinition<T, V>;
 };
 export declare const resolveAlignValue: (value?: "start" | "center" | "end") => "center" | "flex-end" | "flex-start";
+export declare const resolveDragHandleXPos: (elements: {
+    cell?: HTMLElement | null;
+    handle?: HTMLDivElement | null;
+    parent?: HTMLDivElement | null;
+}) => void;

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

@@ -1,5 +1,5 @@
 export { DataTable } from './DataTable';
-export type { DataTableProps, ColumnDefinition, CellContext, HeaderContext, } from './_types';
+export type { DataTableProps, ColumnDefinition, CellContext, HeaderContext, SortKey, } from './_types';
 export { createColumnHelper } from './columnHelper';
 export type { DataTableViewState } from './viewState';
-export { applyDataTableViewState, createDefaultViewState } from './viewState';
+export { applyDataTableViewState, createDefaultViewState, resolveSortFromViewState, captureSortToViewState, } from './viewState';

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

@@ -1,8 +1,14 @@
-import type { ColumnDefinition } from './_types';
+import type { ColumnDefinition, SortKey } from './_types';
 export type DataTableViewState = {
     columnOrder: string[];
     hiddenColumns?: string[];
     columnWidths?: Record<string, number | string>;
+    sort?: {
+        columnId: string;
+        dir: 'asc' | 'desc';
+    };
 };
 export declare function createDefaultViewState<T>(columns: ColumnDefinition<T, any>[]): DataTableViewState;
 export declare function applyDataTableViewState<T>(columns: ColumnDefinition<T, any>[], state?: DataTableViewState | null): ColumnDefinition<T, any>[];
+export declare function resolveSortFromViewState<T>(columns: ColumnDefinition<T, any>[], state?: DataTableViewState | null): SortKey<T>;
+export declare function captureSortToViewState<T>(columns: ColumnDefinition<T, any>[], sort: SortKey<T>): DataTableViewState['sort'];

package/dist/types/index.d.ts

@@ -89,6 +89,6 @@ export type { CustomVideoControls, PlayState, VideoElement, VideoProps, } from '
 export { VideoController } from './components/VideoController';
 export type { VideoControllerProps } from './components/VideoController';
 export { DataTable } from './components/DataTable';
-export type { DataTableProps, ColumnDefinition, CellContext, HeaderContext, } from './components/DataTable';
-export { createColumnHelper, applyDataTableViewState, createDefaultViewState, } from './components/DataTable';
+export type { DataTableProps, ColumnDefinition, CellContext, HeaderContext, SortKey, } from './components/DataTable';
+export { createColumnHelper, applyDataTableViewState, createDefaultViewState, resolveSortFromViewState, captureSortToViewState, } from './components/DataTable';
 export type { DataTableViewState } from './components/DataTable';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@apple-pie/slice",
-	"version": "0.1.41",
+	"version": "0.1.43",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.mjs",
 	"exports": {

package/dist/cjs/chunks/viewState-BXZkYXcb.js

@@ -1,160 +0,0 @@
-"use strict";
-
-var jsxRuntime = require("react/jsx-runtime"), React = require("react"), misc = require("./misc-BMPaUWuY.js"), styles = {
-    tableWrapper: "DataTable-module_tableWrapper__BzoJE",
-    table: "DataTable-module_table__oL4Dz",
-    baseCell: "DataTable-module_baseCell__DQl-z",
-    baseCellWrapper: "DataTable-module_baseCellWrapper__WMgNm",
-    headerCellWrapper: "DataTable-module_headerCellWrapper__ytVYY",
-    m: "DataTable-module_m__G9QOp type-module_body-m-regular__LuQBA",
-    scroll: "DataTable-module_scroll__grEU0 scrollBars-module_scrollbars__c-ZPl"
-};
-
-const resolveAlignValue = value => {
-    switch (value) {
-      case "start":
-        return "flex-start";
-
-      case "center":
-      default:
-        return "center";
-
-      case "end":
-        return "flex-end";
-    }
-};
-
-exports.DataTable = function(props) {
-    const {backgroundColor: backgroundColor = "var(--core-surface-primary)", headerBackgroundColor: headerBackgroundColor = "var(--core-surface-secondary)", candyStripeBackgroundColor: candyStripeBackgroundColor = "var(--core-surface-primary-tint)", backgroundColorHoverRow: backgroundColorHoverRow = "var(--core-surface-primary-tint)", freezeColumn: freezeColumn = !1, headerSticky: headerSticky = !0, height: height = "auto", width: width = "100%", borderColor: borderColor = "var(--core-outline-primary)", borderStyle: borderStyle = "box", columnDefinitions: columnDefinitions = [], tableData: tableData = [], getRowId: getRowId, filter: filter, caption: caption = "Data Table", onDoubleClick: onDoubleClick, onClick: onClick, onMouseOut: onMouseOut, onMouseOver: onMouseOver} = props, [hScroll, setHScroll] = React.useState(!1), [vScroll, setVScroll] = React.useState(!1), [hoveredRow, setHoveredRow] = React.useState(null), wrapperRef = React.useRef(null), cornerBoxShadow = React.useCallback(() => {
-        const shadows = [];
-        return hScroll && freezeColumn && shadows.push("1px 0 0 var(--core-outline-primary)", "5px 0 0 rgba(0,0,0,0.1)"), 
-        vScroll && headerSticky && shadows.push("0 1px 0 var(--core-outline-primary)"), 
-        vScroll && headerSticky && !hScroll && shadows.push("0 5px 0 rgba(0,0,0,0.1)"), 
-        shadows.length > 0 ? shadows.join(",") : "none";
-    }, [ hScroll, vScroll, freezeColumn, headerSticky ]), columnBoxShadow = React.useMemo(() => {
-        const shadows = [];
-        return hScroll && freezeColumn && shadows.push("1px 0 0 var(--core-outline-primary)", "5px 0 0 rgba(0,0,0,0.1)"), 
-        shadows.length > 0 ? shadows.join(",") : "none";
-    }, [ hScroll, freezeColumn ]), headerBoxShadow = React.useMemo(() => {
-        const shadows = [];
-        return vScroll && headerSticky && shadows.push("0 1px 0 var(--core-outline-primary)", "0 5px 0 rgba(0,0,0,0.1)"), 
-        shadows.length > 0 ? shadows.join(",") : "none";
-    }, [ vScroll, headerSticky ]), cssVars = React.useMemo(() => ({
-        "--table-width": misc.setStyle(width),
-        "--table-height": misc.setStyle(height),
-        "--table-background-color": backgroundColor,
-        "--table-column-box-shadow": columnBoxShadow,
-        "--table-header-box-shadow": headerBoxShadow,
-        "--table-corner-box-shadow": cornerBoxShadow,
-        "--table-header-background-color": headerBackgroundColor,
-        "--table-candy-stripe-background-color": candyStripeBackgroundColor,
-        "--table-freeze-column-position": freezeColumn ? "sticky" : "relative",
-        "--table-header-sticky-position": headerSticky ? "sticky" : "relative",
-        "--table-border-color": borderColor,
-        "--table-corner-position": freezeColumn || headerSticky ? "sticky" : "relative",
-        "--table-corner-left": freezeColumn ? "0px" : "unset",
-        "--table-border-width": "none" === borderStyle ? "0" : "1px",
-        "--table-border-sides": "box" === borderStyle ? "1px" : "0"
-    }), [ backgroundColor, headerBackgroundColor, candyStripeBackgroundColor, cornerBoxShadow, columnBoxShadow, headerBoxShadow, freezeColumn, headerSticky, width, height, borderColor, borderStyle ]), handleScroll = React.useCallback(() => {
-        var _a, _b, _c, _d;
-        const hScrollAmount = null !== (_b = null === (_a = wrapperRef.current) || void 0 === _a ? void 0 : _a.scrollLeft) && void 0 !== _b ? _b : 0, vScrollAmount = null !== (_d = null === (_c = wrapperRef.current) || void 0 === _c ? void 0 : _c.scrollTop) && void 0 !== _d ? _d : 0;
-        setHScroll(hScrollAmount > 0), setVScroll(vScrollAmount > 0);
-    }, []), rows = React.useMemo(() => filter ? tableData.filter((row, index, array) => filter(row, index, array)) : tableData, [ tableData, filter ]), handleCellHover = React.useCallback((col, colId, row, rowId, over) => {
-        over ? (setHoveredRow(rowId), onMouseOver && onMouseOver(col, colId, row, rowId)) : (setHoveredRow(prev => prev === rowId ? null : prev), 
-        onMouseOut && onMouseOut(col, colId, row, rowId));
-    }, [ onMouseOut, onMouseOver ]), handleClick = React.useCallback((col, colId, row, rowId, dbl) => {
-        dbl && onDoubleClick ? onDoubleClick(col, colId, row, rowId) : onClick && onClick(col, colId, row, rowId);
-    }, [ onDoubleClick, onClick ]), resolveCellBG = React.useCallback(rowId => backgroundColorHoverRow && hoveredRow === rowId ? backgroundColorHoverRow : !!candyStripeBackgroundColor && rowId % 2 != 0 ? candyStripeBackgroundColor : backgroundColor, [ hoveredRow, backgroundColorHoverRow, candyStripeBackgroundColor, backgroundColor ]);
-    return jsxRuntime.jsx("div", {
-        ref: wrapperRef,
-        className: `${styles.tableWrapper} ${styles.scroll}`,
-        style: cssVars,
-        onScroll: handleScroll,
-        children: jsxRuntime.jsxs("table", {
-            className: styles.table,
-            children: [ jsxRuntime.jsx("caption", {
-                children: caption
-            }), jsxRuntime.jsx("thead", {
-                children: jsxRuntime.jsx("tr", {
-                    children: columnDefinitions.map(column => {
-                        const padding = misc.setStyle(column.padding, 16);
-                        return jsxRuntime.jsx("th", {
-                            "data-column-id": column.id,
-                            className: `${styles.baseCell} ${styles.headerCell} ${styles.m}`,
-                            children: jsxRuntime.jsx("div", {
-                                className: styles.headerCellWrapper,
-                                style: {
-                                    padding: padding
-                                },
-                                children: column.renderHeader ? column.renderHeader({
-                                    column: column
-                                }) : column.title
-                            })
-                        }, column.id);
-                    })
-                })
-            }), jsxRuntime.jsx("tbody", {
-                children: rows.map((row, rowIndex) => jsxRuntime.jsx("tr", {
-                    children: columnDefinitions.map((col, colIndex) => {
-                        var _a;
-                        const value = col.accessor(row), justifyContent = resolveAlignValue(col.justify), alignItems = resolveAlignValue(col.align), padding = misc.setStyle(col.padding, 16), whiteSpace = col.nowrap ? "nowrap" : "", background = resolveCellBG(rowIndex);
-                        return jsxRuntime.jsx("td", {
-                            "data-column-id": `${col.id}.${rowIndex}`,
-                            className: `${styles.baseCell} ${styles.m}`,
-                            onClick: () => handleClick(col, colIndex, row, rowIndex, !1),
-                            onDoubleClick: () => handleClick(col, colIndex, row, rowIndex, !0),
-                            onKeyDown: e => misc.accessibleKeyDown(e, () => handleClick(col, colIndex, row, rowIndex, !1)),
-                            onMouseOver: () => handleCellHover(col, colIndex, row, rowIndex, !0),
-                            onFocus: () => handleCellHover(col, colIndex, row, rowIndex, !0),
-                            onMouseOut: () => handleCellHover(col, colIndex, row, rowIndex, !1),
-                            onBlur: () => handleCellHover(col, colIndex, row, rowIndex, !1),
-                            style: {
-                                background: background
-                            },
-                            children: jsxRuntime.jsx("div", {
-                                className: styles.baseCellWrapper,
-                                style: {
-                                    justifyContent: justifyContent,
-                                    alignItems: alignItems,
-                                    padding: padding,
-                                    whiteSpace: whiteSpace
-                                },
-                                children: col.renderCell ? col.renderCell({
-                                    row: row,
-                                    value: value,
-                                    rowIndex: rowIndex
-                                }) : null !== (_a = null == value ? void 0 : value.toString()) && void 0 !== _a ? _a : ""
-                            })
-                        }, col.id);
-                    })
-                }, getRowId ? getRowId(row, rowIndex) : rowIndex))
-            }) ]
-        })
-    });
-}, exports.applyDataTableViewState = function(columns, state) {
-    var _a;
-    if (!state) return columns;
-    const byId = new Map(columns.map(column => [ column.id, column ])), hidden = new Set(null !== (_a = state.hiddenColumns) && void 0 !== _a ? _a : []), seen = new Set, ordered = [];
-    for (const id of state.columnOrder) {
-        if (seen.has(id) || hidden.has(id)) continue;
-        const column = byId.get(id);
-        column && (seen.add(id), ordered.push(column));
-    }
-    for (const column of columns) seen.has(column.id) || hidden.has(column.id) || (seen.add(column.id), 
-    ordered.push(column));
-    if (!state.columnWidths) return ordered;
-    const widths = state.columnWidths;
-    return ordered.map(column => column.id in widths ? Object.assign(Object.assign({}, column), {
-        width: widths[column.id]
-    }) : column);
-}, exports.createColumnHelper = function() {
-    return {
-        accessor: (accessor, def) => Object.assign({
-            accessor: accessor
-        }, def)
-    };
-}, exports.createDefaultViewState = function(columns) {
-    return {
-        columnOrder: columns.map(column => column.id)
-    };
-};

package/dist/esm/chunks/viewState-BhDVDWPZ.mjs

@@ -1,172 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-
-import React, { useState, useCallback, useMemo } from "react";
-
-import { s as setStyle, a as accessibleKeyDown } from "./misc-DrBZJBmZ.mjs";
-
-var styles = {
-    tableWrapper: "DataTable-module_tableWrapper__BzoJE",
-    table: "DataTable-module_table__oL4Dz",
-    baseCell: "DataTable-module_baseCell__DQl-z",
-    baseCellWrapper: "DataTable-module_baseCellWrapper__WMgNm",
-    headerCellWrapper: "DataTable-module_headerCellWrapper__ytVYY",
-    m: "DataTable-module_m__G9QOp type-module_body-m-regular__LuQBA",
-    scroll: "DataTable-module_scroll__grEU0 scrollBars-module_scrollbars__c-ZPl"
-};
-
-function createColumnHelper() {
-    return {
-        accessor: (accessor, def) => Object.assign({
-            accessor: accessor
-        }, def)
-    };
-}
-
-const resolveAlignValue = value => {
-    switch (value) {
-      case "start":
-        return "flex-start";
-
-      case "center":
-      default:
-        return "center";
-
-      case "end":
-        return "flex-end";
-    }
-};
-
-function DataTable(props) {
-    const {backgroundColor: backgroundColor = "var(--core-surface-primary)", headerBackgroundColor: headerBackgroundColor = "var(--core-surface-secondary)", candyStripeBackgroundColor: candyStripeBackgroundColor = "var(--core-surface-primary-tint)", backgroundColorHoverRow: backgroundColorHoverRow = "var(--core-surface-primary-tint)", freezeColumn: freezeColumn = !1, headerSticky: headerSticky = !0, height: height = "auto", width: width = "100%", borderColor: borderColor = "var(--core-outline-primary)", borderStyle: borderStyle = "box", columnDefinitions: columnDefinitions = [], tableData: tableData = [], getRowId: getRowId, filter: filter, caption: caption = "Data Table", onDoubleClick: onDoubleClick, onClick: onClick, onMouseOut: onMouseOut, onMouseOver: onMouseOver} = props, [hScroll, setHScroll] = useState(!1), [vScroll, setVScroll] = useState(!1), [hoveredRow, setHoveredRow] = useState(null), wrapperRef = React.useRef(null), cornerBoxShadow = useCallback(() => {
-        const shadows = [];
-        return hScroll && freezeColumn && shadows.push("1px 0 0 var(--core-outline-primary)", "5px 0 0 rgba(0,0,0,0.1)"), 
-        vScroll && headerSticky && shadows.push("0 1px 0 var(--core-outline-primary)"), 
-        vScroll && headerSticky && !hScroll && shadows.push("0 5px 0 rgba(0,0,0,0.1)"), 
-        shadows.length > 0 ? shadows.join(",") : "none";
-    }, [ hScroll, vScroll, freezeColumn, headerSticky ]), columnBoxShadow = useMemo(() => {
-        const shadows = [];
-        return hScroll && freezeColumn && shadows.push("1px 0 0 var(--core-outline-primary)", "5px 0 0 rgba(0,0,0,0.1)"), 
-        shadows.length > 0 ? shadows.join(",") : "none";
-    }, [ hScroll, freezeColumn ]), headerBoxShadow = useMemo(() => {
-        const shadows = [];
-        return vScroll && headerSticky && shadows.push("0 1px 0 var(--core-outline-primary)", "0 5px 0 rgba(0,0,0,0.1)"), 
-        shadows.length > 0 ? shadows.join(",") : "none";
-    }, [ vScroll, headerSticky ]), cssVars = useMemo(() => ({
-        "--table-width": setStyle(width),
-        "--table-height": setStyle(height),
-        "--table-background-color": backgroundColor,
-        "--table-column-box-shadow": columnBoxShadow,
-        "--table-header-box-shadow": headerBoxShadow,
-        "--table-corner-box-shadow": cornerBoxShadow,
-        "--table-header-background-color": headerBackgroundColor,
-        "--table-candy-stripe-background-color": candyStripeBackgroundColor,
-        "--table-freeze-column-position": freezeColumn ? "sticky" : "relative",
-        "--table-header-sticky-position": headerSticky ? "sticky" : "relative",
-        "--table-border-color": borderColor,
-        "--table-corner-position": freezeColumn || headerSticky ? "sticky" : "relative",
-        "--table-corner-left": freezeColumn ? "0px" : "unset",
-        "--table-border-width": "none" === borderStyle ? "0" : "1px",
-        "--table-border-sides": "box" === borderStyle ? "1px" : "0"
-    }), [ backgroundColor, headerBackgroundColor, candyStripeBackgroundColor, cornerBoxShadow, columnBoxShadow, headerBoxShadow, freezeColumn, headerSticky, width, height, borderColor, borderStyle ]), handleScroll = useCallback(() => {
-        var _a, _b, _c, _d;
-        const hScrollAmount = null !== (_b = null === (_a = wrapperRef.current) || void 0 === _a ? void 0 : _a.scrollLeft) && void 0 !== _b ? _b : 0, vScrollAmount = null !== (_d = null === (_c = wrapperRef.current) || void 0 === _c ? void 0 : _c.scrollTop) && void 0 !== _d ? _d : 0;
-        setHScroll(hScrollAmount > 0), setVScroll(vScrollAmount > 0);
-    }, []), rows = useMemo(() => filter ? tableData.filter((row, index, array) => filter(row, index, array)) : tableData, [ tableData, filter ]), handleCellHover = useCallback((col, colId, row, rowId, over) => {
-        over ? (setHoveredRow(rowId), onMouseOver && onMouseOver(col, colId, row, rowId)) : (setHoveredRow(prev => prev === rowId ? null : prev), 
-        onMouseOut && onMouseOut(col, colId, row, rowId));
-    }, [ onMouseOut, onMouseOver ]), handleClick = useCallback((col, colId, row, rowId, dbl) => {
-        dbl && onDoubleClick ? onDoubleClick(col, colId, row, rowId) : onClick && onClick(col, colId, row, rowId);
-    }, [ onDoubleClick, onClick ]), resolveCellBG = useCallback(rowId => backgroundColorHoverRow && hoveredRow === rowId ? backgroundColorHoverRow : !!candyStripeBackgroundColor && rowId % 2 != 0 ? candyStripeBackgroundColor : backgroundColor, [ hoveredRow, backgroundColorHoverRow, candyStripeBackgroundColor, backgroundColor ]);
-    return jsx("div", {
-        ref: wrapperRef,
-        className: `${styles.tableWrapper} ${styles.scroll}`,
-        style: cssVars,
-        onScroll: handleScroll,
-        children: jsxs("table", {
-            className: styles.table,
-            children: [ jsx("caption", {
-                children: caption
-            }), jsx("thead", {
-                children: jsx("tr", {
-                    children: columnDefinitions.map(column => {
-                        const padding = setStyle(column.padding, 16);
-                        return jsx("th", {
-                            "data-column-id": column.id,
-                            className: `${styles.baseCell} ${styles.headerCell} ${styles.m}`,
-                            children: jsx("div", {
-                                className: styles.headerCellWrapper,
-                                style: {
-                                    padding: padding
-                                },
-                                children: column.renderHeader ? column.renderHeader({
-                                    column: column
-                                }) : column.title
-                            })
-                        }, column.id);
-                    })
-                })
-            }), jsx("tbody", {
-                children: rows.map((row, rowIndex) => jsx("tr", {
-                    children: columnDefinitions.map((col, colIndex) => {
-                        var _a;
-                        const value = col.accessor(row), justifyContent = resolveAlignValue(col.justify), alignItems = resolveAlignValue(col.align), padding = setStyle(col.padding, 16), whiteSpace = col.nowrap ? "nowrap" : "", background = resolveCellBG(rowIndex);
-                        return jsx("td", {
-                            "data-column-id": `${col.id}.${rowIndex}`,
-                            className: `${styles.baseCell} ${styles.m}`,
-                            onClick: () => handleClick(col, colIndex, row, rowIndex, !1),
-                            onDoubleClick: () => handleClick(col, colIndex, row, rowIndex, !0),
-                            onKeyDown: e => accessibleKeyDown(e, () => handleClick(col, colIndex, row, rowIndex, !1)),
-                            onMouseOver: () => handleCellHover(col, colIndex, row, rowIndex, !0),
-                            onFocus: () => handleCellHover(col, colIndex, row, rowIndex, !0),
-                            onMouseOut: () => handleCellHover(col, colIndex, row, rowIndex, !1),
-                            onBlur: () => handleCellHover(col, colIndex, row, rowIndex, !1),
-                            style: {
-                                background: background
-                            },
-                            children: jsx("div", {
-                                className: styles.baseCellWrapper,
-                                style: {
-                                    justifyContent: justifyContent,
-                                    alignItems: alignItems,
-                                    padding: padding,
-                                    whiteSpace: whiteSpace
-                                },
-                                children: col.renderCell ? col.renderCell({
-                                    row: row,
-                                    value: value,
-                                    rowIndex: rowIndex
-                                }) : null !== (_a = null == value ? void 0 : value.toString()) && void 0 !== _a ? _a : ""
-                            })
-                        }, col.id);
-                    })
-                }, getRowId ? getRowId(row, rowIndex) : rowIndex))
-            }) ]
-        })
-    });
-}
-
-function createDefaultViewState(columns) {
-    return {
-        columnOrder: columns.map(column => column.id)
-    };
-}
-
-function applyDataTableViewState(columns, state) {
-    var _a;
-    if (!state) return columns;
-    const byId = new Map(columns.map(column => [ column.id, column ])), hidden = new Set(null !== (_a = state.hiddenColumns) && void 0 !== _a ? _a : []), seen = new Set, ordered = [];
-    for (const id of state.columnOrder) {
-        if (seen.has(id) || hidden.has(id)) continue;
-        const column = byId.get(id);
-        column && (seen.add(id), ordered.push(column));
-    }
-    for (const column of columns) seen.has(column.id) || hidden.has(column.id) || (seen.add(column.id), 
-    ordered.push(column));
-    if (!state.columnWidths) return ordered;
-    const widths = state.columnWidths;
-    return ordered.map(column => column.id in widths ? Object.assign(Object.assign({}, column), {
-        width: widths[column.id]
-    }) : column);
-}
-
-export { DataTable as D, applyDataTableViewState as a, createDefaultViewState as b, createColumnHelper as c };