@ceed/cds 0.0.177-beta.5 → 0.0.178

package/src/components/DataTable/DataTable.tsx

@@ -1,1096 +0,0 @@
-import React, {
-  ComponentProps,
-  RefObject,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  useId,
-} from "react";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { styled, LinearProgress, Link } from "@mui/joy";
-import type {
-  CellEditableHandler,
-  ObjectLike,
-  ColumnDef,
-  DataTableProps,
-  LinkColumnDef,
-  Sort,
-  SortModel,
-  InferredIdType,
-} from "./types.js";
-import SortIcon from "@mui/icons-material/ArrowUpwardRounded";
-import Sheet from "../Sheet/index.js";
-import { Table } from "../Table/index.js";
-import Checkbox from "../Checkbox/index.js";
-import Box from "../Box/index.js";
-import Stack from "../Stack/index.js";
-import Typography from "../Typography/index.js";
-import Button from "../Button/index.js";
-import CurrencyInput from "../CurrencyInput/index.js";
-import DatePicker from "../DatePicker/index.js";
-import Input from "../Input/index.js";
-import Textarea from "../Textarea/index.js";
-import Autocomplete, { AutocompleteProps } from "../Autocomplete/index.js";
-import Select from "../Select/index.js";
-import Tooltip from "../Tooltip/index.js";
-import { motion } from "framer-motion";
-import { useControlledState } from "../../hooks/use-controlled-state/index.js";
-import Pagination from "../Pagination/index.js";
-
-function getTextAlign(props: { editMode?: boolean; type?: string }) {
-  return !props.editMode &&
-    ["number", "date", "currency"].includes(props.type || "")
-    ? "end"
-    : "start";
-}
-
-const OverlayWrapper = 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: number) =>
-  "Intl" in window ? new Intl.NumberFormat().format(value) : value;
-
-const Resizer = (ref: RefObject<HTMLTableCellElement>) => (
-  <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: MouseEvent) => {
-        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 = styled("tbody", {
-  name: "DataTable",
-  slot: "tableBody",
-})({
-  // HACK: for virtualization: tbody의 height를 렌더링 된 tr의 총 높이 보다 높은 값으로 지정하고도 tr의 size를 유지하기 위한 꼼수
-  "&::after": {
-    content: "''",
-    display: "block",
-    height: "0.01em",
-  },
-});
-
-const VirtualizedTableRow = styled("tr", {
-  name: "DataTable",
-  slot: "tableRow",
-  shouldForwardProp: (prop) => prop !== "striped",
-})<{ striped?: boolean }>(({ 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 = styled("span", {
-  name: "DataTable",
-  slot: "headCellAsterisk",
-})(({ theme }) => ({
-  color: "var(--ceed-palette-danger-500)",
-  marginLeft: theme.spacing(0.5),
-}));
-
-const MotionSortIcon = motion(SortIcon);
-
-const HeadCell = <T extends ObjectLike, GetId>(
-  props: ColumnDef<T, GetId> & {
-    tableId: string;
-    stickyHeader?: boolean;
-    editMode?: boolean;
-    sort?: Sort;
-    onSortChange?: (props: {
-      field: keyof T;
-      multiple: boolean;
-      currentSort?: Sort;
-    }) => void;
-    sortOrder: Sort[];
-  }
-) => {
-  // prop destruction
-  const {
-    width,
-    maxWidth,
-    minWidth,
-    stickyHeader,
-    resizable,
-    field,
-    tableId,
-    headerName,
-    required,
-    editMode,
-    sort,
-    onSortChange,
-    sortable = true,
-    sortOrder,
-  } = props;
-  // lib hooks
-  // state, ref, querystring hooks
-  const ref = useRef<HTMLTableCellElement>(null);
-  // form hooks
-  // query hooks
-  // calculated values
-  const headId = useMemo(
-    () => `${tableId}_header_${headerName ?? (field as string)}`.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",
-  } as React.CSSProperties;
-  const textAlign = getTextAlign(props);
-
-  const initialSort = sortOrder[0];
-
-  const sortIcon = sortable && (
-    <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"
-      }
-      // NOTE: material-icon에서 주입시켜 주는 data-testid를 sort에 맞춰 ArrowUpward ↔ ArrowDownward로 변경할 바에 그냥 undefined로 둔다.
-      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" },
-      }}
-      // #endregion
-    />
-  );
-  // effects
-  // handlers
-
-  return (
-    <motion.th
-      id={headId}
-      aria-label={headerName ?? (field as string)}
-      aria-sort={
-        sort
-          ? { asc: "ascending" as const, desc: "descending" as const }[sort]
-          : "none"
-      }
-      ref={ref}
-      key={field as string}
-      style={style}
-      onClick={(e) =>
-        sortable &&
-        onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey })
-      }
-      whileHover="hover"
-      initial="initial"
-    >
-      <Stack gap={1} direction="row" justifyContent={textAlign}>
-        {textAlign === "end" && sortIcon}
-        <div>
-          {headerName ?? (field as string)}
-          {editMode && required && <Asterisk>*</Asterisk>}
-        </div>
-        {textAlign === "start" && sortIcon}
-      </Stack>
-      {resizer}
-    </motion.th>
-  );
-};
-
-const BodyCell = <T extends Record<string, any>, ID>(
-  props: {
-    tableId: string;
-    row: T;
-    rowId: ID;
-    editMode?: boolean;
-    noWrap?: boolean;
-  } & ColumnDef<T, any>
-) => {
-  // prop destruction
-  const {
-    tableId,
-    field,
-    type,
-    renderCell,
-    renderEditCell,
-    isCellEditable,
-    noWrap,
-    row,
-    rowId,
-  } = props;
-  // lib hooks
-  // state, ref, querystring hooks
-  const [value, setValue] = useState(row[field]);
-  const cellRef = useRef<HTMLTableCellElement>(null);
-  // form hooks
-  // query hooks
-  // calculated values
-  const params = useMemo(
-    () => ({
-      row,
-      value,
-      id: rowId,
-    }),
-    [row, rowId, value]
-  );
-
-  const editMode = useMemo(
-    () =>
-      !!(
-        props.editMode &&
-        (typeof isCellEditable === "function"
-          ? isCellEditable(params as any)
-          : isCellEditable ?? true)
-      ),
-    [props.editMode, isCellEditable, params]
-  );
-
-  const componentProps = useMemo(
-    () => ({
-      ...(typeof props.componentProps === "function"
-        ? props.componentProps(params as any)
-        : props.componentProps || {}),
-      size: "sm",
-    }),
-    [props, params]
-  );
-
-  const editModeComponentProps = useMemo(
-    () => ({
-      ...componentProps,
-      onChange: (e: any) => {
-        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: any) => {
-        componentProps.onFocus?.(e);
-        props.onCellEditStart?.({
-          ...params,
-          originalRow: row,
-          row: {
-            ...params.row,
-            value,
-          },
-          value,
-        });
-      },
-      onBlur: (e: any) => {
-        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: any) => {
-          (componentProps as AutocompleteProps).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 = useMemo(() => {
-    if (renderEditCell) {
-      return renderEditCell(params as any);
-    }
-    return (
-      {
-        date: (
-          <DatePicker
-            value={value as string}
-            {...(editModeComponentProps as ComponentProps<typeof DatePicker>)}
-          />
-        ),
-        currency: (
-          <CurrencyInput
-            value={value as number}
-            {...(editModeComponentProps as ComponentProps<
-              typeof CurrencyInput
-            >)}
-          />
-        ),
-        number: (
-          <Input
-            value={value as number}
-            type="number"
-            {...(editModeComponentProps as ComponentProps<typeof Input>)}
-          />
-        ),
-        text: (
-          <Input
-            value={value as string}
-            type="text"
-            {...(editModeComponentProps as ComponentProps<typeof Input>)}
-          />
-        ),
-        longText: (
-          <Textarea
-            value={value as string}
-            {...(editModeComponentProps as ComponentProps<typeof Textarea>)}
-          />
-        ),
-        autocomplete: (
-          <Autocomplete
-            value={value}
-            options={editModeComponentProps.options || [value]}
-            {...(editModeComponentProps as ComponentProps<typeof Autocomplete>)}
-          />
-        ),
-        select: (
-          <Select
-            value={value as string}
-            // @ts-expect-error NOTE: editComponentProps로 option이 넘어오면 Override되어야 한다
-            options={editModeComponentProps.options || [value]}
-            {...(editModeComponentProps as ComponentProps<
-              typeof Select<string, false>
-            >)}
-          />
-        ),
-      } as Partial<Record<Exclude<typeof type, undefined>, React.ReactNode>>
-    )[type || "text"];
-  }, [value, editModeComponentProps, type]);
-
-  const ReadModeComponent = useMemo(() => {
-    if (renderCell) {
-      return renderCell(params as any);
-    }
-
-    const innerText = value as React.ReactNode;
-
-    const typedComponent = (
-      {
-        link: React.createElement(
-          (props as LinkColumnDef<any, any>).component || Link,
-          {
-            children: innerText,
-            ...(componentProps as ComponentProps<
-              Required<LinkColumnDef<any, any>>["component"]
-            >),
-          }
-        ),
-      } as Partial<Record<Exclude<typeof type, undefined>, React.ReactNode>>
-    )[type || "text"];
-
-    return typedComponent || innerText;
-  }, [value, renderCell, params, type, componentProps, props]);
-
-  const CellComponent = useMemo(
-    () =>
-      editMode && EditModeComponent ? EditModeComponent : ReadModeComponent,
-    [editMode, EditModeComponent, ReadModeComponent]
-  );
-
-  const showTooltip = useMemo(
-    () => noWrap && props.type === "longText",
-    [noWrap, props.type]
-  );
-  // effects
-  useEffect(() => {
-    setValue(row[field]);
-  }, [row, field]);
-  // handlers
-
-  return (
-    <td
-      ref={cellRef}
-      key={field as string}
-      headers={`${tableId}_header_${props.headerName ?? (field as string)}`}
-      style={{
-        textAlign: getTextAlign({ type }),
-        verticalAlign: editMode ? "top" : "middle",
-      }}
-    >
-      {showTooltip ? (
-        <Tooltip
-          title={value}
-          placement="bottom"
-          style={{ maxWidth: "100%" }}
-          enterDelay={1500}
-          enterNextDelay={1500}
-        >
-          <div
-            style={{
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-            }}
-          >
-            {CellComponent}
-          </div>
-        </Tooltip>
-      ) : (
-        CellComponent
-      )}
-    </td>
-  );
-};
-
-const BodyRow = <T extends Record<string, any>, ID>(props: {
-  tableId: string;
-  row: T;
-  rowId: ID;
-  editMode?: boolean;
-  noWrap?: boolean;
-  columns: ColumnDef<T, any>[];
-}) => {
-  // 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 (
-    <>
-      {columns.map((column, i) => (
-        <BodyCell<T, ID>
-          {...column}
-          tableId={tableId}
-          key={`${rowId}_${column.field.toString()}_${i}`}
-          row={row}
-          rowId={rowId}
-          editMode={editMode}
-          noWrap={noWrap}
-        />
-      ))}
-    </>
-  );
-};
-function useDataTableRenderer<
-  T extends Record<PropertyKey, unknown>,
-  GetId extends ((row: T) => any) | undefined = undefined
->({
-  rows: _rows,
-  columns: columnsProp,
-  rowCount: totalRowsProp,
-  pagination,
-  paginationMode,
-  paginationModel,
-  onPaginationModelChange,
-  sortModel: controlledSortModel,
-  sortOrder: _sortOrder = ["asc", "desc", null],
-  selectionModel = [],
-  onSortModelChange,
-  onSelectionModelChange,
-  editMode,
-  getId: _getId,
-  isTotalSelected: _isTotalSelected,
-}: ComponentProps<typeof DataTable<T, GetId>>) {
-  type ID = InferredIdType<T, GetId>;
-
-  const [sortModel, setSortModel] = useControlledState<SortModel<T>[]>(
-    controlledSortModel,
-    [],
-    useCallback(
-      (sortModel: SortModel<T>[]) => onSortModelChange?.(sortModel),
-      [onSortModelChange]
-    )
-  );
-  const columnsByField: { [K in keyof T]: ColumnDef<T, GetId> } = useMemo(
-    () =>
-      columnsProp.reduce(
-        (acc, curr) => ({ ...acc, [curr.field]: curr }),
-        {}
-      ) as { [K in keyof T]: ColumnDef<T, GetId> },
-    [columnsProp]
-  );
-
-  const sortComparator = useCallback(
-    (rowA: T, rowB: T) => {
-      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 = useMemo(
-    () => (sortModel.length ? [..._rows].sort(sortComparator) : _rows),
-    [_rows, sortModel, sortComparator]
-  );
-
-  const sortOrder = useMemo(
-    () => Array.from(new Set(_sortOrder)),
-    [_sortOrder]
-  );
-
-  const [page, setPage] = useState(paginationModel?.page || 1);
-  const pageSize = paginationModel?.pageSize || 20;
-  const getId = useCallback<(row: T, index?: number) => ID>(
-    (row: T, index?: number) =>
-      _getId?.(row) ??
-      ((row as any).id as ID) ??
-      (`${(index || 0) + (page - 1) * pageSize}` as ID),
-    [_getId, page, pageSize]
-  );
-
-  const selectedModelSet = useMemo(
-    () => new Set(selectionModel),
-    [selectionModel]
-  );
-  const dataInPage = useMemo(
-    () =>
-      !pagination || paginationMode === "server"
-        ? rows
-        : rows.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize),
-    [rows, page, pageSize, paginationMode, pagination]
-  );
-  const isAllSelected = useMemo(
-    () =>
-      dataInPage.length > 0 &&
-      dataInPage.every((row, i) => selectedModelSet.has(getId(row, i))),
-    [dataInPage, selectedModelSet, getId]
-  );
-  const rowCount = totalRowsProp || rows.length;
-  const isTotalSelected = useMemo(
-    () =>
-      _isTotalSelected ?? (rowCount > 0 && selectionModel.length === rowCount),
-    [_isTotalSelected, selectionModel, rowCount]
-  );
-
-  const columns = 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 as CellEditableHandler<T, GetId>)
-          : 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 = useCallback(
-    (newPage: number) => {
-      setPage(newPage);
-      onPaginationModelChange?.({ page: newPage, pageSize });
-    },
-    [onPaginationModelChange, pageSize]
-  );
-
-  const handleSortChange = useCallback(
-    (props: { field: keyof T; multiple: boolean; currentSort?: Sort }) => {
-      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]
-  );
-
-  useEffect(() => {
-    // if uncontrolled, reset page to 1
-    if (!paginationModel) {
-      handlePageChange(1);
-    }
-  }, [rowCount, handlePageChange, paginationModel]);
-
-  useEffect(() => {
-    const lastPage = Math.max(1, Math.ceil(rowCount / pageSize));
-    if (page > lastPage) {
-      handlePageChange(lastPage);
-    }
-  }, [page, rowCount, pageSize, handlePageChange]);
-
-  useEffect(() => {
-    onSelectionModelChange?.([]);
-  }, [page]);
-
-  return {
-    rowCount,
-    page,
-    pageSize,
-    onPaginationModelChange: handlePageChange,
-    getId,
-    HeadCell,
-    BodyRow,
-    dataInPage,
-    handleSortChange,
-    isAllSelected, // all rows are selected on this page
-    isTotalSelected,
-    isSelectedRow: useCallback(
-      (model: ID) => selectedModelSet.has(model),
-      [selectedModelSet]
-    ),
-    onAllCheckboxChange: useCallback(() => {
-      onSelectionModelChange?.(isAllSelected ? [] : dataInPage.map(getId));
-    }, [isAllSelected, dataInPage, onSelectionModelChange, getId]),
-    onCheckboxChange: useCallback(
-      (event: any, selectedModel: ID) => {
-        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: useCallback(() => {
-      onSelectionModelChange?.(
-        isTotalSelected ? [] : rows.map(getId),
-        !isTotalSelected
-      );
-    }, [isTotalSelected, rows, onSelectionModelChange, getId]),
-  };
-}
-
-function DataTable<
-  T extends Record<PropertyKey, any>,
-  GetId extends ((row: T) => any) | undefined = undefined
->(props: DataTableProps<T, GetId>) {
-  // 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
-    loading,
-    slots: {
-      checkbox: RenderCheckbox = Checkbox,
-      toolbar: Toolbar,
-      footer: Footer,
-      loadingOverlay: LoadingOverlay = () => (
-        <LinearProgress value={8} variant="plain" />
-      ),
-    } = {},
-    slotProps: {
-      checkbox: checkboxProps = {},
-      toolbar: toolbarProps,
-      background: backgroundProps = {},
-    } = {},
-    stripe,
-    ...innerProps
-  } = props;
-
-  type ID = InferredIdType<T, GetId>;
-
-  // state, ref, querystring hooks
-  const tableId = useId();
-  const parentRef = useRef<HTMLDivElement>(null);
-
-  // lib hooks
-  const {
-    columns,
-    isAllSelected,
-    isSelectedRow,
-    onAllCheckboxChange,
-    onCheckboxChange,
-    getId,
-    rowCount,
-    page,
-    pageSize,
-    onPaginationModelChange,
-    handleSortChange,
-    dataInPage,
-    isTotalSelected,
-    onTotalSelect,
-    HeadCell,
-    BodyRow,
-  } = useDataTableRenderer(props);
-
-  const virtualizer = useVirtualizer({
-    count: dataInPage.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 32,
-    measureElement: (element) => element.clientHeight,
-    overscan: 20,
-  });
-
-  // form hooks
-  // query hooks
-  // calculated values
-  const paginationModel = useMemo(() => ({ page, pageSize }), [page, pageSize]);
-  const totalSize = virtualizer.getTotalSize();
-  const virtualizedItems = virtualizer.getVirtualItems();
-
-  // effects
-  // handlers
-
-  return (
-    <Box
-      sx={{
-        maxHeight: "100%",
-        overflow: "auto",
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
-      {(!!checkboxSelection || !!Toolbar) && (
-        <Stack
-          direction="row"
-          sx={{
-            pt: 1,
-            pb: 1,
-          }}
-          justifyContent="space-between"
-          alignItems="center"
-        >
-          {!!checkboxSelection && (
-            <Stack direction="row" spacing={1}>
-              {!isAllSelected && (
-                <Typography level="body-xs">
-                  {numberFormatter(selectionModel?.length || 0)} items selected
-                </Typography>
-              )}
-              {isAllSelected && !isTotalSelected && (
-                <Stack direction="row" spacing={1} alignItems="center">
-                  <Typography level="body-xs">
-                    All {numberFormatter(selectionModel?.length || 0)} items on
-                    this page are selected.
-                  </Typography>
-                  <Button size="sm" variant="plain" onClick={onTotalSelect}>
-                    Select all {numberFormatter(rowCount ?? rows.length)} items
-                  </Button>
-                </Stack>
-              )}
-              {isTotalSelected && (
-                <Stack direction="row" spacing={1} alignItems="center">
-                  <Typography level="body-xs">
-                    All {numberFormatter(rowCount ?? rows.length)} items are
-                    selected.
-                  </Typography>
-                  <Button
-                    size="sm"
-                    variant="plain"
-                    color="danger"
-                    onClick={onTotalSelect}
-                  >
-                    Cancel
-                  </Button>
-                </Stack>
-              )}
-            </Stack>
-          )}
-          {Toolbar && <Toolbar {...(toolbarProps || {})} />}
-        </Stack>
-      )}
-      <Sheet
-        variant="outlined"
-        sx={{
-          height: "100%",
-          overflow: "auto",
-          width: "100%",
-          boxShadow: "sm",
-          borderRadius: "sm",
-        }}
-        ref={parentRef}
-        {...backgroundProps}
-      >
-        <Table {...innerProps}>
-          <thead>
-            <tr>
-              {checkboxSelection && (
-                <th
-                  style={{
-                    width: "40px",
-                    textAlign: "center",
-                  }}
-                >
-                  <RenderCheckbox
-                    onChange={onAllCheckboxChange}
-                    checked={isAllSelected}
-                    indeterminate={
-                      (selectionModel || []).length > 0 && !isAllSelected
-                    }
-                    {...checkboxProps}
-                  />
-                </th>
-              )}
-              {columns.map((c, i) => (
-                <HeadCell<T, ID>
-                  tableId={tableId}
-                  key={`${c.field.toString()}_${i}`}
-                  stickyHeader={props.stickyHeader}
-                  editMode={!!c.isCellEditable}
-                  onSortChange={handleSortChange}
-                  {...c}
-                />
-              ))}
-            </tr>
-          </thead>
-          <VirtualizedTableBody
-            style={{
-              height: `${totalSize}px`,
-            }}
-          >
-            {!!loading && (
-              <OverlayWrapper>
-                <td>
-                  <Box
-                    sx={{
-                      position: "absolute",
-                      top: 0,
-                      left: 0,
-                      right: 0,
-                    }}
-                  >
-                    <LoadingOverlay />
-                  </Box>
-                </td>
-              </OverlayWrapper>
-            )}
-            {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 (
-                <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 && (
-                    <th
-                      scope="row"
-                      style={{
-                        textAlign: "center",
-                      }}
-                    >
-                      <RenderCheckbox
-                        onClick={(e: any) => e.stopPropagation()}
-                        onChange={(e: any) => onCheckboxChange(e, rowId)}
-                        checked={isSelectedRow(rowId)}
-                        {...checkboxProps}
-                      />
-                    </th>
-                  )}
-                  <BodyRow<T, ID>
-                    tableId={tableId}
-                    columns={columns as ColumnDef<T, any>[]}
-                    row={row}
-                    rowId={rowId}
-                    editMode={editMode}
-                    noWrap={props.noWrap}
-                  />
-                </VirtualizedTableRow>
-              );
-            })}
-          </VirtualizedTableBody>
-          {Footer && <Footer />}
-        </Table>
-      </Sheet>
-      {pagination && (
-        <Pagination
-          py={2}
-          size="sm"
-          alignItems="flex-end"
-          paginationModel={paginationModel}
-          rowCount={rowCount}
-          onPageChange={onPaginationModelChange}
-        />
-      )}
-    </Box>
-  );
-}
-
-export { DataTable };
-
-DataTable.displayName = "DataTable";