@ceed/cds 0.0.185 → 0.0.187-cjs.0

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,570 @@
+'use strict';
+
+var React = require('react');
+var reactVirtual = require('@tanstack/react-virtual');
+var joy = require('@mui/joy');
+var ArrowUpwardRounded = require('../../external/@mui/icons-material/esm/ArrowUpwardRounded.js');
+var Info = require('../../external/@mui/icons-material/esm/Info.js');
+var Sheet = require('../Sheet/Sheet.js');
+var Table = require('../Table/Table.js');
+var Checkbox = require('../Checkbox/Checkbox.js');
+var Box = require('../Box/Box.js');
+var Typography = require('../Typography/Typography.js');
+var Button = require('../Button/Button.js');
+var CurrencyInput = require('../CurrencyInput/CurrencyInput.js');
+var DatePicker = require('../DatePicker/DatePicker.js');
+var Input = require('../Input/Input.js');
+var Textarea = require('../Textarea/Textarea.js');
+var Autocomplete = require('../Autocomplete/Autocomplete.js');
+var Select = require('../Select/Select.js');
+var Tooltip = require('../Tooltip/Tooltip.js');
+var framerMotion = require('framer-motion');
+var index = require('../../hooks/use-controlled-state/index.js');
+var Pagination = require('../Pagination/Pagination.js');
+
+function getTextAlign(props) {
+    return !props.editMode &&
+        ["number", "date", "currency"].includes(props.type || "")
+        ? "end"
+        : "start";
+}
+const OverlayWrapper = joy.styled("tr", {
+    name: "DataTable",
+    slot: "overlayWrapper",
+})({
+    position: "sticky",
+    top: `calc(var(--unstable_TableCell-height, 32px))`,
+    left: 0,
+    right: 0,
+    zIndex: 1,
+    "& > td": {
+        height: 0,
+        padding: 0,
+        border: "none !important",
+    },
+});
+const numberFormatter = (value) => "Intl" in window ? new Intl.NumberFormat().format(value) : value;
+const Resizer = (ref) => (React.createElement(Box.Box, { sx: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: "4px",
+        cursor: "col-resize",
+    }, 
+    // NOTE: Resize가 정렬을 변경하면 안된다.
+    onClick: (e) => e.stopPropagation(), onMouseDown: (e) => {
+        const initialX = e.clientX;
+        const initialWidth = ref.current?.getBoundingClientRect().width;
+        const onMouseMove = (e) => {
+            if (initialWidth && initialX) {
+                ref.current.style.width = `${initialWidth + (e.clientX - initialX)}px`;
+            }
+        };
+        const onMouseUp = () => {
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+        };
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+    } }));
+const VirtualizedTableBody = joy.styled("tbody", {
+    name: "DataTable",
+    slot: "tableBody",
+})({
+    // HACK: for virtualization: tbody의 height를 렌더링 된 tr의 총 높이 보다 높은 값으로 지정하고도 tr의 size를 유지하기 위한 꼼수
+    "&::after": {
+        content: "''",
+        display: "block",
+        height: "0.01em",
+    },
+});
+const VirtualizedTableRow = joy.styled("tr", {
+    name: "DataTable",
+    slot: "tableRow",
+    shouldForwardProp: (prop) => prop !== "striped",
+})(({ striped }) => ({
+    ...(striped && {
+        background: "var(--TableRow-stripeBackground, var(--ceed-palette-background-level2))",
+        color: "var(--ceed-palette-text-primary)",
+    }),
+    "&:hover": {
+        background: "var(--TableRow-hoverBackground, var(--ceed-palette-background-level3))",
+    },
+}));
+const Asterisk = joy.styled("span", {
+    name: "DataTable",
+    slot: "headCellAsterisk",
+})(({ theme }) => ({
+    color: "var(--ceed-palette-danger-500)",
+    marginLeft: theme.spacing(0.5),
+}));
+const MotionSortIcon = framerMotion.motion(ArrowUpwardRounded);
+const HeadCell = (props) => {
+    // prop destruction
+    const { width, maxWidth, minWidth, stickyHeader, resizable, field, tableId, headerName, required, editMode, sort, onSortChange, sortable = true, sortOrder, description, } = props;
+    // lib hooks
+    // state, ref, querystring hooks
+    const ref = React.useRef(null);
+    // form hooks
+    // query hooks
+    // calculated values
+    const headId = React.useMemo(() => `${tableId}_header_${headerName ?? field}`.trim(), [tableId, headerName, field]);
+    const resizer = resizable ?? true ? Resizer(ref) : null;
+    const style = {
+        width: width,
+        minWidth: minWidth ?? "50px",
+        maxWidth: maxWidth,
+        position: stickyHeader ? undefined : "relative",
+        cursor: sortable ? "pointer" : "default",
+        // TODO: multi-sort때문에 일단 추가한 property, joy-ui에서는 multi-sort시 th에 user-select: none을 적용하고 툴팁을 띄워준다.
+        userSelect: "none",
+    };
+    const textAlign = getTextAlign(props);
+    const initialSort = sortOrder[0];
+    const sortIcon = sortable && (React.createElement(MotionSortIcon, { style: {
+            width: "16px",
+            height: "16px",
+        }, 
+        // @ts-ignore: material-icon을 js로 import해서 role property에 대한 타입을 못찾는다.
+        role: "img", "aria-labelledby": headId, "aria-description": (sort ?? initialSort) === "desc" ? "descending" : "ascending", "data-testid": undefined, 
+        // #region framer-motion
+        variants: {
+            hover: { opacity: 1 },
+            initial: { opacity: 0 },
+        }, animate: {
+            color: !!sort
+                ? "var(--ceed-palette-text-secondary)"
+                : "var(--ceed-palette-primary-solidDisabledColor)",
+            rotate: (sort ?? initialSort) === "desc" ? 180 : 0,
+            opacity: !!sort ? 1 : 0,
+        }, transition: {
+            duration: 0,
+            rotate: { duration: 0.2, ease: "easeOut" },
+            color: { duration: 0.2, ease: "easeInOut" },
+            opacity: { duration: 0.2, ease: "easeInOut" },
+        } }));
+    const descriptionTooltip = description ? (React.createElement(Tooltip.Tooltip, { onClick: (e) => e.stopPropagation(), title: React.createElement(React.Fragment, null, description?.split("\n").map((line, i) => (React.createElement("div", { key: i }, line)))), placement: "top" },
+        React.createElement(Info, { fontSize: "small" }))) : null;
+    // effects
+    // handlers
+    return (React.createElement(framerMotion.motion.th, { id: headId, "aria-label": headerName ?? field, "aria-sort": sort
+            ? { asc: "ascending", desc: "descending" }[sort]
+            : "none", ref: ref, key: field, style: style, onClick: (e) => sortable &&
+            onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey }), whileHover: "hover", initial: "initial" },
+        React.createElement(joy.Stack, { gap: 1, direction: "row", justifyContent: textAlign, alignItems: "center" },
+            textAlign === "end" && sortIcon,
+            textAlign === "end" && descriptionTooltip,
+            React.createElement("div", null,
+                headerName ?? field,
+                editMode && required && React.createElement(Asterisk, null, "*")),
+            textAlign === "start" && descriptionTooltip,
+            textAlign === "start" && sortIcon),
+        resizer));
+};
+const BodyCell = (props) => {
+    // prop destruction
+    const { tableId, field, type, renderCell, renderEditCell, isCellEditable, noWrap, row, rowId, } = props;
+    // lib hooks
+    // state, ref, querystring hooks
+    const [value, setValue] = React.useState(row[field]);
+    const cellRef = React.useRef(null);
+    // form hooks
+    // query hooks
+    // calculated values
+    const params = React.useMemo(() => ({
+        row,
+        value,
+        id: rowId,
+    }), [row, rowId, value]);
+    const editMode = React.useMemo(() => !!(props.editMode &&
+        (typeof isCellEditable === "function"
+            ? isCellEditable(params)
+            : isCellEditable ?? true)), [props.editMode, isCellEditable, params]);
+    const componentProps = React.useMemo(() => ({
+        ...(typeof props.componentProps === "function"
+            ? props.componentProps(params)
+            : props.componentProps || {}),
+        size: "sm",
+    }), [props, params]);
+    const editModeComponentProps = React.useMemo(() => ({
+        ...componentProps,
+        onChange: (e) => {
+            componentProps.onChange?.(e);
+            setValue(e.target.value);
+            if (type === "select") {
+                props.onCellEditStop?.({
+                    ...params,
+                    originalRow: row,
+                    row: {
+                        ...params.row,
+                        [field]: e.target.value,
+                    },
+                    value: e.target.value,
+                });
+            }
+        },
+        onFocus: (e) => {
+            componentProps.onFocus?.(e);
+            props.onCellEditStart?.({
+                ...params,
+                originalRow: row,
+                row: {
+                    ...params.row,
+                    value,
+                },
+                value,
+            });
+        },
+        onBlur: (e) => {
+            componentProps.onBlur?.(e);
+            if (type &&
+                ["number", "text", "longText", "currency", "date"].includes(type)) {
+                props.onCellEditStop?.({
+                    ...params,
+                    originalRow: row,
+                    row: {
+                        ...params.row,
+                        [field]: value,
+                    },
+                    value,
+                });
+            }
+        },
+        ...(type === "autocomplete" && {
+            onChangeComplete: (e) => {
+                componentProps.onChangeComplete?.(e);
+                setValue(e.target.value);
+                props.onCellEditStop?.({
+                    ...params,
+                    originalRow: row,
+                    row: {
+                        ...params.row,
+                        [field]: e.target.value,
+                    },
+                    value: e.target.value,
+                });
+            },
+        }),
+    }), [params, row, field, value, componentProps, type, props]);
+    const EditModeComponent = React.useMemo(() => {
+        if (renderEditCell) {
+            return renderEditCell(params);
+        }
+        return {
+            date: (React.createElement(DatePicker.DatePicker, { value: value, ...editModeComponentProps })),
+            currency: (React.createElement(CurrencyInput.CurrencyInput, { value: value, ...editModeComponentProps })),
+            number: (React.createElement(Input.Input, { value: value, type: "number", ...editModeComponentProps })),
+            text: (React.createElement(Input.Input, { value: value, type: "text", ...editModeComponentProps })),
+            longText: (React.createElement(Textarea.Textarea, { value: value, ...editModeComponentProps })),
+            autocomplete: (React.createElement(Autocomplete.Autocomplete, { value: value, options: editModeComponentProps.options || [value], ...editModeComponentProps })),
+            select: (React.createElement(Select.Select, { value: value, 
+                // @ts-expect-error NOTE: editComponentProps로 option이 넘어오면 Override되어야 한다
+                options: editModeComponentProps.options || [value], ...editModeComponentProps })),
+        }[type || "text"];
+    }, [value, editModeComponentProps, type]);
+    const ReadModeComponent = React.useMemo(() => {
+        if (renderCell) {
+            return renderCell(params);
+        }
+        const innerText = value;
+        const typedComponent = {
+            link: React.createElement(props.component || joy.Link, {
+                children: innerText,
+                ...componentProps,
+            }),
+        }[type || "text"];
+        return typedComponent || innerText;
+    }, [value, renderCell, params, type, componentProps, props]);
+    const CellComponent = React.useMemo(() => editMode && EditModeComponent ? EditModeComponent : ReadModeComponent, [editMode, EditModeComponent, ReadModeComponent]);
+    const showTooltip = React.useMemo(() => noWrap && props.type === "longText", [noWrap, props.type]);
+    // effects
+    React.useEffect(() => {
+        setValue(row[field]);
+    }, [row, field]);
+    // handlers
+    return (React.createElement("td", { ref: cellRef, key: field, headers: `${tableId}_header_${props.headerName ?? field}`, style: {
+            textAlign: getTextAlign({ type }),
+            verticalAlign: editMode ? "top" : "middle",
+        } }, showTooltip ? (React.createElement(Tooltip.Tooltip, { title: value, placement: "bottom", style: { maxWidth: "100%" }, enterDelay: 1500, enterNextDelay: 1500 },
+        React.createElement("div", { style: {
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+            } }, CellComponent))) : (CellComponent)));
+};
+const BodyRow = (props) => {
+    // prop destruction
+    const { tableId, columns, rowId, editMode, noWrap, row } = props;
+    // lib hooks
+    // state, ref, querystring hooks
+    // form hooks
+    // query hooks
+    // calculated values
+    // effects
+    // handlers
+    return (React.createElement(React.Fragment, null, columns.map((column, i) => (React.createElement(BodyCell, { ...column, tableId: tableId, key: `${rowId}_${column.field.toString()}_${i}`, row: row, rowId: rowId, editMode: editMode, noWrap: noWrap })))));
+};
+function useDataTableRenderer({ rows: _rows, columns: columnsProp, rowCount: totalRowsProp, initialState, pagination, paginationMode, paginationModel, onPaginationModelChange, sortModel: controlledSortModel, sortOrder: _sortOrder = ["asc", "desc", null], selectionModel = [], onSortModelChange, onSelectionModelChange, editMode, getId: _getId, isTotalSelected: _isTotalSelected, }) {
+    const [sortModel, setSortModel] = index.useControlledState(controlledSortModel, initialState?.sorting?.sortModel ?? [], React.useCallback((sortModel) => onSortModelChange?.(sortModel), [onSortModelChange]));
+    const columnsByField = React.useMemo(() => columnsProp.reduce((acc, curr) => ({ ...acc, [curr.field]: curr }), {}), [columnsProp]);
+    const sortComparator = React.useCallback((rowA, rowB) => {
+        for (const sort of sortModel) {
+            const { field, sort: direction } = sort;
+            const a = rowA[field];
+            const b = rowB[field];
+            const column = columnsByField[field];
+            let comparison = 0;
+            if (column.sortComparator) {
+                comparison = column.sortComparator({
+                    rowA,
+                    rowB,
+                });
+            }
+            else if (typeof a === "string" && typeof b === "string") {
+                comparison = a.localeCompare(b);
+            }
+            else if (typeof a === "number" && typeof b === "number") {
+                comparison = a - b;
+            }
+            else if (a instanceof Date && b instanceof Date) {
+                comparison = a.getTime() - b.getTime();
+            }
+            if (comparison !== 0) {
+                return direction === "asc" ? comparison : -comparison;
+            }
+        }
+        return 0;
+    }, [sortModel, columnsByField]);
+    const rows = React.useMemo(() => (sortModel.length ? [..._rows].sort(sortComparator) : _rows), [_rows, sortModel, sortComparator]);
+    const sortOrder = React.useMemo(() => Array.from(new Set(_sortOrder)), [_sortOrder]);
+    const [page, setPage] = React.useState(paginationModel?.page || 1);
+    const pageSize = paginationModel?.pageSize || 20;
+    const getId = React.useCallback((row, index) => _getId?.(row) ??
+        row.id ??
+        `${(index || 0) + (page - 1) * pageSize}`, [_getId, page, pageSize]);
+    const selectedModelSet = React.useMemo(() => new Set(selectionModel), [selectionModel]);
+    const dataInPage = React.useMemo(() => !pagination || paginationMode === "server"
+        ? rows
+        : rows.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize), [rows, page, pageSize, paginationMode, pagination]);
+    const isAllSelected = React.useMemo(() => dataInPage.length > 0 &&
+        dataInPage.every((row, i) => selectedModelSet.has(getId(row, i))), [dataInPage, selectedModelSet, getId]);
+    const rowCount = totalRowsProp || rows.length;
+    const isTotalSelected = React.useMemo(() => _isTotalSelected ?? (rowCount > 0 && selectionModel.length === rowCount), [_isTotalSelected, selectionModel, rowCount]);
+    const columns = React.useMemo(() => {
+        const baseColumns = columnsProp ||
+            // fallback
+            Object.keys(rows[0] || {}).map((key) => ({
+                field: key,
+            }));
+        return baseColumns.map((column) => ({
+            ...column,
+            isCellEditable: editMode &&
+                (typeof column.isCellEditable === "function"
+                    ? column.isCellEditable
+                    : column.isCellEditable ?? true),
+            sort: sortModel.find((sort) => sort.field === column.field)?.sort,
+            sortOrder: columnsByField[column.field]?.sortOrder || sortOrder,
+        }));
+    }, [rows, columnsProp, editMode, sortModel, columnsByField, sortOrder]);
+    const handlePageChange = React.useCallback((newPage) => {
+        setPage(newPage);
+        onPaginationModelChange?.({ page: newPage, pageSize });
+    }, [onPaginationModelChange, pageSize]);
+    const handleSortChange = React.useCallback((props) => {
+        const { field, currentSort, multiple } = props;
+        const column = columnsByField[field];
+        const columnSortOrder = column.sortOrder || sortOrder;
+        if (currentSort !== undefined) {
+            const currentOrderIndex = columnSortOrder.indexOf(currentSort);
+            const nextSortOrderIndex = (currentOrderIndex + 1) % columnSortOrder.length;
+            const nextSortOrder = columnSortOrder[nextSortOrderIndex];
+            if (!nextSortOrder) {
+                const newSortModel = multiple
+                    ? sortModel.filter((model) => model.field !== field)
+                    : [];
+                setSortModel(newSortModel);
+                return;
+            }
+            const newSortModel = multiple
+                ? sortModel.map((model) => model.field === field ? { field, sort: nextSortOrder } : model)
+                : [{ field, sort: nextSortOrder }];
+            setSortModel(newSortModel);
+        }
+        else {
+            const newSortModel = multiple
+                ? [...sortModel, { field, sort: columnSortOrder[0] }]
+                : [{ field, sort: columnSortOrder[0] }];
+            setSortModel(newSortModel);
+        }
+    }, [sortOrder, columnsByField, sortModel, setSortModel]);
+    React.useEffect(() => {
+        // if uncontrolled, reset page to 1
+        if (!paginationModel) {
+            handlePageChange(1);
+        }
+    }, [rowCount, handlePageChange, paginationModel]);
+    React.useEffect(() => {
+        const lastPage = Math.max(1, Math.ceil(rowCount / pageSize));
+        if (page > lastPage) {
+            handlePageChange(lastPage);
+        }
+    }, [page, rowCount, pageSize, handlePageChange]);
+    React.useEffect(() => {
+        onSelectionModelChange?.([]);
+    }, [page]);
+    return {
+        rowCount,
+        page,
+        pageSize,
+        onPaginationModelChange: handlePageChange,
+        getId,
+        HeadCell,
+        BodyRow,
+        dataInPage,
+        handleSortChange,
+        isAllSelected, // all rows are selected on this page
+        isTotalSelected,
+        isSelectedRow: React.useCallback((model) => selectedModelSet.has(model), [selectedModelSet]),
+        onAllCheckboxChange: React.useCallback(() => {
+            onSelectionModelChange?.(isAllSelected ? [] : dataInPage.map(getId));
+        }, [isAllSelected, dataInPage, onSelectionModelChange, getId]),
+        onCheckboxChange: React.useCallback((event, selectedModel) => {
+            if (selectedModelSet.has(selectedModel)) {
+                const newSelectionModel = selectionModel.filter((model) => model !== selectedModel);
+                onSelectionModelChange?.(newSelectionModel);
+            }
+            else {
+                const newSelectionModel = [...selectionModel, selectedModel];
+                onSelectionModelChange?.(newSelectionModel);
+            }
+        }, [selectionModel, onSelectionModelChange, selectedModelSet]),
+        columns,
+        onTotalSelect: React.useCallback(() => {
+            onSelectionModelChange?.(isTotalSelected ? [] : rows.map(getId), !isTotalSelected);
+        }, [isTotalSelected, rows, onSelectionModelChange, getId]),
+    };
+}
+function DataTable(props) {
+    // prop destruction
+    const { rows, checkboxSelection, editMode, selectionModel, onSelectionModelChange, disableSelectionOnClick, onRowClick, rowCount: _, // rowCount is used in useDataTableRenderer
+    columns: __, // columns is used in useDataTableRenderer
+    onPaginationModelChange: ___, // onPaginationModelChange is used in useDataTableRenderer
+    pagination, paginationMode: ____, // paginationMode is used in useDataTableRenderer
+    paginationModel: _____, // paginationModel is used in useDataTableRenderer
+    sortModel: ______, // sortModel is used in useDataTableRenderer
+    sortOrder: _______, // sortOrder is used in useDataTableRenderer
+    onSortModelChange: ________, // onSortModelChange is used in useDataTableRenderer
+    initialState: _________, // initialState is used in useDataTableRenderer
+    loading, slots: { checkbox: RenderCheckbox = Checkbox.Checkbox, toolbar: Toolbar, footer: Footer, loadingOverlay: LoadingOverlay = () => (React.createElement(joy.LinearProgress, { value: 8, variant: "plain" })), } = {}, slotProps: { checkbox: checkboxProps = {}, toolbar: toolbarProps, background: backgroundProps = {}, } = {}, stripe, ...innerProps } = props;
+    // state, ref, querystring hooks
+    const tableId = React.useId();
+    const parentRef = React.useRef(null);
+    // lib hooks
+    const { columns, isAllSelected, isSelectedRow, onAllCheckboxChange, onCheckboxChange, getId, rowCount, page, pageSize, onPaginationModelChange, handleSortChange, dataInPage, isTotalSelected, onTotalSelect, HeadCell, BodyRow, } = useDataTableRenderer(props);
+    const virtualizer = reactVirtual.useVirtualizer({
+        count: dataInPage.length,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => 32,
+        measureElement: (element) => element.clientHeight,
+        overscan: 20,
+    });
+    // form hooks
+    // query hooks
+    // calculated values
+    const paginationModel = React.useMemo(() => ({ page, pageSize }), [page, pageSize]);
+    const totalSize = virtualizer.getTotalSize();
+    const virtualizedItems = virtualizer.getVirtualItems();
+    // effects
+    // handlers
+    return (React.createElement(Box.Box, { sx: {
+            maxHeight: "100%",
+            overflow: "auto",
+            display: "flex",
+            flexDirection: "column",
+        } },
+        (!!checkboxSelection || !!Toolbar) && (React.createElement(joy.Stack, { direction: "row", sx: {
+                pt: 1,
+                pb: 1,
+            }, justifyContent: "space-between", alignItems: "center" },
+            !!checkboxSelection && (React.createElement(joy.Stack, { direction: "row", spacing: 1 },
+                !isAllSelected && (React.createElement(Typography.Typography, { level: "body-xs" },
+                    numberFormatter(selectionModel?.length || 0),
+                    " items selected")),
+                isAllSelected && !isTotalSelected && (React.createElement(joy.Stack, { direction: "row", spacing: 1, alignItems: "center" },
+                    React.createElement(Typography.Typography, { level: "body-xs" },
+                        "All ",
+                        numberFormatter(selectionModel?.length || 0),
+                        " items on this page are selected."),
+                    React.createElement(Button.Button, { size: "sm", variant: "plain", onClick: onTotalSelect },
+                        "Select all ",
+                        numberFormatter(rowCount ?? rows.length),
+                        " items"))),
+                isTotalSelected && (React.createElement(joy.Stack, { direction: "row", spacing: 1, alignItems: "center" },
+                    React.createElement(Typography.Typography, { level: "body-xs" },
+                        "All ",
+                        numberFormatter(rowCount ?? rows.length),
+                        " items are selected."),
+                    React.createElement(Button.Button, { size: "sm", variant: "plain", color: "danger", onClick: onTotalSelect }, "Cancel"))))),
+            Toolbar && React.createElement(Toolbar, { ...(toolbarProps || {}) }))),
+        React.createElement(Sheet.Sheet, { variant: "outlined", sx: {
+                height: "100%",
+                overflow: "auto",
+                width: "100%",
+                boxShadow: "sm",
+                borderRadius: "sm",
+            }, ref: parentRef, ...backgroundProps },
+            React.createElement(Table.Table, { ...innerProps },
+                React.createElement("thead", null,
+                    React.createElement("tr", null,
+                        checkboxSelection && (React.createElement("th", { style: {
+                                width: "40px",
+                                textAlign: "center",
+                            } },
+                            React.createElement(RenderCheckbox, { onChange: onAllCheckboxChange, checked: isAllSelected, indeterminate: (selectionModel || []).length > 0 && !isAllSelected, ...checkboxProps }))),
+                        columns.map((c, i) => (React.createElement(HeadCell, { tableId: tableId, key: `${c.field.toString()}_${i}`, stickyHeader: props.stickyHeader, editMode: !!c.isCellEditable, onSortChange: handleSortChange, ...c }))))),
+                React.createElement(VirtualizedTableBody, { style: {
+                        height: `${totalSize}px`,
+                    } },
+                    !!loading && (React.createElement(OverlayWrapper, null,
+                        React.createElement("td", null,
+                            React.createElement(Box.Box, { sx: {
+                                    position: "absolute",
+                                    top: 0,
+                                    left: 0,
+                                    right: 0,
+                                } },
+                                React.createElement(LoadingOverlay, null))))),
+                    virtualizedItems.map((virtualizedRow, index) => {
+                        const rowIndex = virtualizedRow.index;
+                        const row = dataInPage[rowIndex];
+                        const rowId = getId(row, rowIndex);
+                        const striped = stripe &&
+                            ((stripe === "even" && (rowIndex + 1) % 2 === 0) ||
+                                (stripe === "odd" && (rowIndex + 1) % 2 === 1));
+                        return (React.createElement(VirtualizedTableRow, { key: rowId, role: checkboxSelection && !disableSelectionOnClick
+                                ? "checkbox"
+                                : undefined, tabIndex: checkboxSelection && !disableSelectionOnClick
+                                ? -1
+                                : undefined, onClick: (e) => {
+                                onRowClick?.({ row, rowId }, e);
+                                checkboxSelection &&
+                                    !disableSelectionOnClick &&
+                                    onCheckboxChange(e, rowId);
+                            }, "aria-checked": checkboxSelection && !disableSelectionOnClick
+                                ? isSelectedRow(rowId)
+                                : undefined, striped: striped, style: {
+                                height: `${virtualizedRow.size}px`,
+                                transform: `translateY(${virtualizedRow.start - index * virtualizedRow.size}px)`,
+                            } },
+                            checkboxSelection && (React.createElement("th", { scope: "row", style: {
+                                    textAlign: "center",
+                                } },
+                                React.createElement(RenderCheckbox, { onClick: (e) => e.stopPropagation(), onChange: (e) => onCheckboxChange(e, rowId), checked: isSelectedRow(rowId), ...checkboxProps }))),
+                            React.createElement(BodyRow, { tableId: tableId, columns: columns, row: row, rowId: rowId, editMode: editMode, noWrap: props.noWrap })));
+                    })),
+                Footer && React.createElement(Footer, null))),
+        pagination && (React.createElement(Pagination.Pagination, { py: 2, size: "sm", alignItems: "flex-end", paginationModel: paginationModel, rowCount: rowCount, onPageChange: onPaginationModelChange }))));
+}
+DataTable.displayName = "DataTable";
+
+exports.DataTable = DataTable;