@orfium/ictinus 5.43.0 → 5.43.2

package/src/components/TopAppBar/__snapshots__/TopAppBar.test.tsx.snap

@@ -214,6 +214,10 @@ exports[`TopAppBar > should render correctly 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  gap: var(--ictinus-spacing-4);
   color: var(--ictinus-color-text-default-active);
   height: var(--ictinus-sizing-9);
   background-color: var(--ictinus-color-palette-tertiary-base);
@@ -244,22 +248,6 @@ exports[`TopAppBar > should render correctly 1`] = `
 }
 
 .emotion-11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  gap: var(--ictinus-spacing-4);
-}
-
-.emotion-12 {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
@@ -298,31 +286,12 @@ exports[`TopAppBar > should render correctly 1`] = `
   letter-spacing: var(--ictinus-letter-spacing-1);
 }
 
-.emotion-12 img {
+.emotion-11 img {
   border-radius: var(--ictinus-border-radius-7);
   width: 100%;
   height: 100%;
 }
 
-.emotion-13 {
-  width: 1.25rem;
-  height: 1.25rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-14 {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.emotion-14 path,
-.emotion-14 rect {
-  fill: var(--ictinus-color-text-default-active)!important;
-}
-
 <div>
   <div
     aria-label="Top Application Banner"
@@ -383,37 +352,31 @@ exports[`TopAppBar > should render correctly 1`] = `
           data-testid="button-userMenu"
           type="button"
         >
-          <span
+          <div
             class="emotion-11"
+            data-testid="_avatar"
           >
-            <div
-              class="emotion-12"
-              data-testid="_avatar"
-            >
-              <img
-                src="https://mui.com/static/images/avatar/1.jpg"
-              />
-            </div>
-            <span>
-              Tom Cruise
-            </span>
-            <div
-              class="emotion-13"
-              data-slot="icon"
-            >
-              <svg
-                class="emotion-14"
-                fill="none"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M5.29797 8.64196L9.25345 12.6836C9.36392 12.7965 9.48388 12.8774 9.61333 12.9265C9.74278 12.9755 9.87167 13 10 13C10.1339 13 10.2642 12.9755 10.3908 12.9265C10.5175 12.8774 10.6361 12.7965 10.7466 12.6836L14.702 8.64196C14.9007 8.439 15 8.21608 15 7.97322C15 7.73035 14.9007 7.50744 14.702 7.30448C14.5034 7.1015 14.2852 7.00002 14.0475 7.00002C13.8099 7.00002 13.5917 7.1015 13.3931 7.30448L10 10.7714L6.60694 7.30448C6.40831 7.1015 6.19014 7.00002 5.95246 7.00002C5.71477 7.00002 5.49661 7.1015 5.29797 7.30448C5.09932 7.50744 5 7.73035 5 7.97322C5 8.21608 5.09932 8.439 5.29797 8.64196Z"
-                  fill="#6265AD"
-                />
-              </svg>
-            </div>
+            <img
+              src="https://mui.com/static/images/avatar/1.jpg"
+            />
+          </div>
+          <span
+            class="Text__t6529w6"
+            data-ictinus="test-version"
+          >
+            Tom Cruise
           </span>
+          <svg
+            class="properties_color_active_base__146hxcf23a properties_height_5_base__146hxcf74 properties_width_5_base__146hxcf4c"
+            data-ictinus="test-version"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5.29797 8.64196L9.25345 12.6836C9.36392 12.7965 9.48388 12.8774 9.61333 12.9265C9.74278 12.9755 9.87167 13 10 13C10.1339 13 10.2642 12.9755 10.3908 12.9265C10.5175 12.8774 10.6361 12.7965 10.7466 12.6836L14.702 8.64196C14.9007 8.439 15 8.21608 15 7.97322C15 7.73035 14.9007 7.50744 14.702 7.30448C14.5034 7.1015 14.2852 7.00002 14.0475 7.00002C13.8099 7.00002 13.5917 7.1015 13.3931 7.30448L10 10.7714L6.60694 7.30448C6.40831 7.1015 6.19014 7.00002 5.95246 7.00002C5.71477 7.00002 5.49661 7.1015 5.29797 7.30448C5.09932 7.50744 5 7.73035 5 7.97322C5 8.21608 5.09932 8.439 5.29797 8.64196Z"
+              fill="currentColor"
+            />
+          </svg>
         </button>
       </div>
     </div>
@@ -635,6 +598,10 @@ exports[`TopAppBar > should render correctly on dark 1`] = `
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  gap: var(--ictinus-spacing-4);
   color: var(--ictinus-color-text-default-active);
   height: var(--ictinus-sizing-9);
   background-color: var(--ictinus-color-palette-tertiary-base);
@@ -665,22 +632,6 @@ exports[`TopAppBar > should render correctly on dark 1`] = `
 }
 
 .emotion-11 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  gap: var(--ictinus-spacing-4);
-}
-
-.emotion-12 {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
@@ -719,31 +670,12 @@ exports[`TopAppBar > should render correctly on dark 1`] = `
   letter-spacing: var(--ictinus-letter-spacing-1);
 }
 
-.emotion-12 img {
+.emotion-11 img {
   border-radius: var(--ictinus-border-radius-7);
   width: 100%;
   height: 100%;
 }
 
-.emotion-13 {
-  width: 1.25rem;
-  height: 1.25rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-14 {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.emotion-14 path,
-.emotion-14 rect {
-  fill: var(--ictinus-color-text-default-active)!important;
-}
-
 <div>
   <div
     aria-label="Top Application Banner"
@@ -804,37 +736,31 @@ exports[`TopAppBar > should render correctly on dark 1`] = `
           data-testid="button-userMenu"
           type="button"
         >
-          <span
+          <div
             class="emotion-11"
+            data-testid="_avatar"
           >
-            <div
-              class="emotion-12"
-              data-testid="_avatar"
-            >
-              <img
-                src="https://mui.com/static/images/avatar/1.jpg"
-              />
-            </div>
-            <span>
-              Tom Cruise
-            </span>
-            <div
-              class="emotion-13"
-              data-slot="icon"
-            >
-              <svg
-                class="emotion-14"
-                fill="none"
-                viewBox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M5.29797 8.64196L9.25345 12.6836C9.36392 12.7965 9.48388 12.8774 9.61333 12.9265C9.74278 12.9755 9.87167 13 10 13C10.1339 13 10.2642 12.9755 10.3908 12.9265C10.5175 12.8774 10.6361 12.7965 10.7466 12.6836L14.702 8.64196C14.9007 8.439 15 8.21608 15 7.97322C15 7.73035 14.9007 7.50744 14.702 7.30448C14.5034 7.1015 14.2852 7.00002 14.0475 7.00002C13.8099 7.00002 13.5917 7.1015 13.3931 7.30448L10 10.7714L6.60694 7.30448C6.40831 7.1015 6.19014 7.00002 5.95246 7.00002C5.71477 7.00002 5.49661 7.1015 5.29797 7.30448C5.09932 7.50744 5 7.73035 5 7.97322C5 8.21608 5.09932 8.439 5.29797 8.64196Z"
-                  fill="#6265AD"
-                />
-              </svg>
-            </div>
+            <img
+              src="https://mui.com/static/images/avatar/1.jpg"
+            />
+          </div>
+          <span
+            class="Text__t6529w6"
+            data-ictinus="test-version"
+          >
+            Tom Cruise
           </span>
+          <svg
+            class="properties_color_active_base__146hxcf23a properties_height_5_base__146hxcf74 properties_width_5_base__146hxcf4c"
+            data-ictinus="test-version"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5.29797 8.64196L9.25345 12.6836C9.36392 12.7965 9.48388 12.8774 9.61333 12.9265C9.74278 12.9755 9.87167 13 10 13C10.1339 13 10.2642 12.9755 10.3908 12.9265C10.5175 12.8774 10.6361 12.7965 10.7466 12.6836L14.702 8.64196C14.9007 8.439 15 8.21608 15 7.97322C15 7.73035 14.9007 7.50744 14.702 7.30448C14.5034 7.1015 14.2852 7.00002 14.0475 7.00002C13.8099 7.00002 13.5917 7.1015 13.3931 7.30448L10 10.7714L6.60694 7.30448C6.40831 7.1015 6.19014 7.00002 5.95246 7.00002C5.71477 7.00002 5.49661 7.1015 5.29797 7.30448C5.09932 7.50744 5 7.73035 5 7.97322C5 8.21608 5.09932 8.439 5.29797 8.64196Z"
+              fill="currentColor"
+            />
+          </svg>
         </button>
       </div>
     </div>

package/src/data-table/DataTable.tsx

@@ -0,0 +1,36 @@
+import type { Table } from '@tanstack/table-core';
+
+import { forwardRef, useState } from 'react';
+
+import { type BoxProps, Box } from '../vanilla/Box';
+import { DataTableProvider } from './DataTableContext';
+
+export type DataTableProps = BoxProps<
+  'div',
+  {
+    /**
+     * Pass the table instance returned from `useReactTable()` hook.
+     */
+    table: Table<any>;
+  }
+>;
+
+export const DataTable = forwardRef<HTMLDivElement, DataTableProps>(
+  ({ children, table, ...props }, ref) => {
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+
+    return (
+      <Box display="flex" flexDirection="column" maxH="full" maxW="full" ref={ref} {...props}>
+        <DataTableProvider
+          highlightedIndex={highlightedIndex}
+          setHighlightedIndex={setHighlightedIndex}
+          table={table}
+        >
+          {children}
+        </DataTableProvider>
+      </Box>
+    );
+  }
+);
+
+DataTable.displayName = 'DataTable';

package/src/data-table/DataTableBody.css.ts

@@ -0,0 +1,127 @@
+import { vars } from '@orfium/tokens';
+
+import { createVar, getVarName, style } from '../vanilla-extract';
+import * as styles from '../vanilla/Table/TableRow.css';
+
+import { recipe } from '@vanilla-extract/recipes';
+import { sprinkles } from '../sprinkles';
+
+const row = styles.className;
+
+export const cellSizeVar = createVar();
+export const cellOffsetVar = createVar();
+export const leftTotalSizeVar = createVar();
+export const rightTotalSizeVar = createVar();
+export const totalSizeVar = createVar();
+
+const bgHoverColor = createVar({
+  inherits: false,
+  initialValue: 'transparent',
+  syntax: '<color>',
+});
+
+export const root = recipe({
+  base: [
+    sprinkles({
+      display: 'flex',
+      flexDirection: 'column',
+      maxW: 'full',
+      overflow: 'hidden',
+      rounded: '2',
+    }),
+    style({
+      position: 'relative',
+
+      selectors: {
+        '&[data-scroll-timeline]::after': {
+          backgroundImage: `linear-gradient(to left, ${vars.color.transparent['4']}, transparent)`,
+          right: rightTotalSizeVar,
+        },
+        '&[data-scroll-timeline]::before': {
+          backgroundImage: `linear-gradient(to right, ${vars.color.transparent['4']}, transparent)`,
+          left: leftTotalSizeVar,
+        },
+        '[data-theme="dark"] &[data-scroll-timeline]::before': {
+          backgroundImage: `linear-gradient(to right, ${vars.color.transparent['6']}, transparent)`,
+          borderLeft: `1px solid ${vars.color['border-color'].decorative.default}`,
+        },
+        '[data-theme="dark"] &[data-scroll-timeline]::after': {
+          backgroundImage: `linear-gradient(to right, ${vars.color.transparent['6']}, transparent)`,
+          borderRight: `1px solid ${vars.color['border-color'].decorative.default}`,
+        },
+        '&[data-scroll-timeline]::before, &[data-scroll-timeline]::after': {
+          content: '',
+          display: 'block',
+          height: '100%',
+          opacity: 0,
+          pointerEvents: 'none',
+          position: 'absolute',
+          top: 0,
+          transition: '0.3s opacity',
+          width: 16,
+          zIndex: 1,
+        },
+        '&[data-has-left-pinned][data-scroll-timeline]:not([data-scroll-timeline="left"])::before':
+          {
+            opacity: 1,
+          },
+        '&[data-has-right-pinned][data-scroll-timeline]:not([data-scroll-timeline="right"])::after':
+          {
+            opacity: 1,
+          },
+      },
+    }),
+  ],
+});
+
+export const cell = recipe({
+  base: [
+    sprinkles({
+      alignItems: 'flex-start',
+      display: 'flex',
+      bg: 'default',
+    }),
+    style({
+      width: `calc(1px * ${cellSizeVar})`,
+      backgroundImage: `linear-gradient(${bgHoverColor}, ${bgHoverColor})`,
+      transition: `${getVarName(bgHoverColor)} 150ms ease`,
+
+      '@media': {
+        '(hover: hover)': {
+          selectors: {
+            [`[data-selectable] ${row}:hover &`]: {
+              vars: {
+                [bgHoverColor]: vars.color.palette.tertiary.muted,
+              },
+            },
+          },
+        },
+      },
+      selectors: {
+        [`[data-selectable] ${row}[data-selected] &`]: {
+          vars: {
+            [bgHoverColor]: vars.color.palette.tertiary.contrast,
+          },
+        },
+      },
+    }),
+  ],
+  variants: {
+    pinned: {
+      left: style({
+        left: cellOffsetVar,
+      }),
+      right: style({
+        right: cellOffsetVar,
+      }),
+    },
+    resizable: {
+      false: style({
+        flexGrow: `calc(${cellSizeVar} / ${totalSizeVar})`,
+      }),
+      true: style({
+        flexGrow: `calc(${cellSizeVar} / ${totalSizeVar})`,
+      }),
+    },
+  },
+});

package/src/data-table/DataTableBody.tsx

@@ -0,0 +1,282 @@
+import { flexRender } from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { forwardRef, type RefObject, useEffect, useRef } from 'react';
+import { useDOMRef } from '~/components/utils/useDOMRef';
+import { cn } from '../utils/cn';
+import { Box, type BoxProps } from '../vanilla/Box';
+import { Table, TableBody, TableCell, TableHeader, TableRow } from '../vanilla/Table';
+import { useDataTableContext } from './DataTableContext';
+import { DataTableHeaderCell } from './DataTableHeaderCell';
+import { DataTableRow } from './DataTableRow';
+
+import * as styles from './DataTableBody.css';
+
+export type DataTableBodyProps = BoxProps<
+  'div',
+  {
+    estimatedRowHeight?: number;
+    bordered?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+  }
+>;
+
+const COL_VIRTUALIZATION_THRESHOLD = 20;
+const ROW_VIRTUALIZATION_THRESHOLD = 20;
+
+export const DataTableBody = forwardRef<HTMLDivElement, DataTableBodyProps>(
+  (
+    {
+      className,
+      estimatedRowHeight = 44,
+      bordered = false,
+      size = 'sm',
+      style,
+      ...props
+    }: DataTableBodyProps,
+    ref: RefObject<HTMLDivElement>
+  ) => {
+    const domRef = useDOMRef(ref);
+
+    const { table } = useDataTableContext();
+
+    const rows = table.getRowModel().rows;
+    const previousRowsRef = useRef(rows);
+    useEffect(() => {
+      previousRowsRef.current = rows;
+    });
+
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
+    const calculateScrollTimeline = () => {
+      if (!domRef.current || !scrollContainerRef.current) {
+        return;
+      }
+
+      const { offsetWidth, scrollLeft, scrollWidth } = scrollContainerRef.current;
+
+      if (scrollWidth > offsetWidth) {
+        domRef.current.dataset.scrollTimeline =
+          scrollLeft === 0 ? 'left' : scrollLeft >= scrollWidth - offsetWidth ? 'right' : 'middle';
+      } else {
+        delete domRef.current.dataset.scrollTimeline;
+      }
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(calculateScrollTimeline, []);
+
+    const centerColumns = table.getCenterVisibleLeafColumns();
+
+    const columnVirtualizer = useVirtualizer({
+      count: centerColumns.length,
+      enabled: centerColumns.length > COL_VIRTUALIZATION_THRESHOLD,
+      estimateSize: (index) => centerColumns[index].getSize(),
+      getItemKey: (index) => centerColumns[index].id,
+      getScrollElement: () => scrollContainerRef.current,
+      horizontal: true,
+    });
+    const virtualColumns = columnVirtualizer.getVirtualItems();
+    const virtualColumnsOffset = virtualColumns[0]?.start ?? 0;
+
+    const rowVirtualizer = useVirtualizer({
+      count: rows.length,
+      enabled:
+        centerColumns.length > COL_VIRTUALIZATION_THRESHOLD ||
+        rows.length > ROW_VIRTUALIZATION_THRESHOLD,
+      estimateSize: () => estimatedRowHeight,
+      getItemKey: (index) => rows[index].id,
+      getScrollElement: () => scrollContainerRef.current,
+    });
+    const virtualRows = rowVirtualizer.getVirtualItems();
+
+    const isSelectable = table.options.enableRowSelection !== false;
+    const hasLeftPinned = table.getLeftTotalSize() > 0;
+    const hasRightPinned = table.getRightTotalSize() > 0;
+
+    return (
+      <Box
+        ref={domRef}
+        data-selectable={isSelectable ? '' : undefined}
+        data-has-left-pinned={hasLeftPinned ? '' : undefined}
+        data-has-right-pinned={hasRightPinned ? '' : undefined}
+        style={{
+          ...assignInlineVars({
+            [styles.leftTotalSizeVar]: `${table.getLeftTotalSize()}px`,
+            [styles.rightTotalSizeVar]: `${table.getRightTotalSize()}px`,
+            [styles.totalSizeVar]: (
+              table
+                .getHeaderGroups()[0]
+                ?.headers.reduce(
+                  (sum, header) => sum + (header.column.getCanResize() ? header.getSize() : 0),
+                  0
+                ) ?? 0
+            ).toString(),
+          }),
+          ...style,
+        }}
+        className={cn(styles.root({}), className)}
+        {...props}
+      >
+        <Table
+          rounded="inherit"
+          layout="fixed"
+          onScroll={calculateScrollTimeline}
+          ref={scrollContainerRef}
+        >
+          <TableHeader display="grid" pinned>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow display="flex" key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <DataTableHeaderCell
+                    justifyContent={header.column.columnDef.meta?.align}
+                    bordered={bordered}
+                    header={header}
+                    key={header.id}
+                    pinned={!!header.column.getIsPinned()}
+                    style={{
+                      ...assignInlineVars({
+                        [styles.cellOffsetVar]: `${header.column.getStart(header.column.getIsPinned() || 'left')}px`,
+                        [styles.cellSizeVar]: `${header.getSize()}`,
+                      }),
+                    }}
+                    className={cn(
+                      styles.cell({
+                        pinned: header.column.getIsPinned() || undefined,
+                        resizable: header.column.getCanResize(),
+                      })
+                    )}
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(header.column.columnDef.header, header.getContext())}
+                  </DataTableHeaderCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+
+          <TableBody
+            display="grid"
+            style={
+              rowVirtualizer.options.enabled
+                ? { height: `${rowVirtualizer.getTotalSize()}px` }
+                : undefined
+            }
+          >
+            {(rowVirtualizer.options.enabled
+              ? virtualRows.length === 0 && rows.length > 0
+                ? previousRowsRef.current.map((row) => ({
+                    row,
+                    virtualRow: undefined,
+                  }))
+                : virtualRows.map((virtualRow) => ({
+                    row: rows[virtualRow.index],
+                    virtualRow,
+                  }))
+              : rows.map((row) => ({ row, virtualRow: undefined }))
+            ).map(({ row, virtualRow }, index) => (
+              <DataTableRow
+                data-index={virtualRow?.index}
+                display="flex"
+                key={row.id}
+                index={virtualRow?.index ?? index}
+                row={row}
+                ref={virtualRow ? rowVirtualizer.measureElement : undefined}
+                style={
+                  virtualRow
+                    ? {
+                        position: 'absolute',
+                        transform: `translateY(${virtualRow.start}px)`,
+                      }
+                    : undefined
+                }
+              >
+                {row.getLeftVisibleCells().map((cell) => (
+                  <TableCell
+                    bordered={bordered}
+                    size={size}
+                    justifyContent={cell.column.columnDef.meta?.align}
+                    key={cell.id}
+                    pinned
+                    style={{
+                      ...assignInlineVars({
+                        [styles.cellOffsetVar]: `${cell.column.getStart('left')}px`,
+                        [styles.cellSizeVar]: `${cell.column.getSize()}`,
+                      }),
+                    }}
+                    className={cn(
+                      styles.cell({
+                        pinned: 'left',
+                        resizable: cell.column.getCanResize(),
+                      })
+                    )}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+
+                {columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && (
+                  <TableCell style={{ width: virtualColumnsOffset }} />
+                )}
+
+                {(columnVirtualizer.options.enabled
+                  ? virtualColumns.map((virtualCell) => {
+                      const cells = row.getCenterVisibleCells();
+
+                      return cells[virtualCell.index];
+                    })
+                  : row.getCenterVisibleCells()
+                ).map((cell) => (
+                  <TableCell
+                    key={cell.id}
+                    size={size}
+                    bordered={bordered}
+                    justifyContent={cell.column.columnDef.meta?.align}
+                    style={{
+                      ...assignInlineVars({
+                        [styles.cellSizeVar]: `${cell.column.getSize()}`,
+                      }),
+                    }}
+                    className={cn(
+                      styles.cell({
+                        resizable: cell.column.getCanResize(),
+                      })
+                    )}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+
+                {row.getRightVisibleCells().map((cell) => (
+                  <TableCell
+                    key={cell.id}
+                    size={size}
+                    bordered={bordered}
+                    justifyContent={cell.column.columnDef.meta?.align}
+                    pinned
+                    style={{
+                      ...assignInlineVars({
+                        [styles.cellOffsetVar]: `${cell.column.getStart('right')}px`,
+                        [styles.cellSizeVar]: `${cell.column.getSize()}`,
+                      }),
+                    }}
+                    className={cn(
+                      styles.cell({
+                        pinned: 'right',
+                        resizable: cell.column.getCanResize(),
+                      })
+                    )}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </DataTableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </Box>
+    );
+  }
+);
+
+DataTableBody.displayName = 'DataTableBody';