@orfium/ictinus 5.43.4 → 5.43.5

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
 
-> @orfium/ictinus@5.43.4 build /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
+> @orfium/ictinus@5.43.5 build /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
 > pnpm build:main && pnpm build:codemods && pnpm build:vanilla
 
 
-> @orfium/ictinus@5.43.4 build:main /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
+> @orfium/ictinus@5.43.5 build:main /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
 > vite build --mode production
 
 production /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
@@ -52,10 +52,10 @@ computing gzip size...
 dist/components/Table/components/TBody/TBody.style.js                                                          0.29 kB │ gzip:  0.21 kB
 dist/hooks/useEscape.js                                                                                        0.29 kB │ gzip:  0.19 kB
 dist/hooks/useCombinedRefs.js                                                                                  0.29 kB │ gzip:  0.20 kB
-dist/components/Icon/assets/usersAndStatus/statusIndicator.svg.js                                              0.30 kB │ gzip:  0.23 kB
 dist/components/Controls/ControlLabel/ControlHelpText.js                                                       0.30 kB │ gzip:  0.24 kB
-dist/components/Chart/Wrapper.js                                                                               0.30 kB │ gzip:  0.21 kB
+dist/components/Icon/assets/usersAndStatus/statusIndicator.svg.js                                              0.30 kB │ gzip:  0.23 kB
 dist/components/Breadcrumb/Breadcrumb.style.js                                                                 0.30 kB │ gzip:  0.23 kB
+dist/components/Chart/Wrapper.js                                                                               0.30 kB │ gzip:  0.21 kB
 dist/components/TableV4/components/RenderRowOrNestedRow/components/ContentCell/ContentCell.style.js            0.30 kB │ gzip:  0.24 kB
 dist/components/Tabs/components/TabsContainer/TabsContainer.style.js                                           0.31 kB │ gzip:  0.22 kB
 dist/components/TableV4/components/TableCell/utils.js                                                          0.31 kB │ gzip:  0.23 kB
@@ -107,8 +107,8 @@ computing gzip size...
 dist/components/Table/components/TR/TR.style.js                                                                0.48 kB │ gzip:  0.29 kB
 dist/components/Icon/assets/navigation/triangleRight.svg.js                                                    0.49 kB │ gzip:  0.33 kB
 dist/components/Select/Select.style.js                                                                         0.49 kB │ gzip:  0.33 kB
-dist/components/Card/Card.style.js                                                                             0.49 kB │ gzip:  0.33 kB
 dist/components/Icon/assets/navigation/triangleDown.svg.js                                                     0.49 kB │ gzip:  0.34 kB
+dist/components/Card/Card.style.js                                                                             0.49 kB │ gzip:  0.33 kB
 dist/components/Icon/assets/navigation/triangleLeft.svg.js                                                     0.49 kB │ gzip:  0.34 kB
 dist/components/ProgressIndicator/components/ProgressCircle/ProgressCircle.style.js                            0.49 kB │ gzip:  0.26 kB
 dist/components/Drawer/components/DrawerFooter/DrawerFooter.js                                                 0.49 kB │ gzip:  0.33 kB
@@ -207,8 +207,8 @@ computing gzip size...
 dist/components/Search/StatefulSearch.js                                                                       0.89 kB │ gzip:  0.48 kB
 dist/components/Slider/components/SliderMark/SliderMark.js                                                     0.89 kB │ gzip:  0.50 kB
 dist/components/Icon/assets/musicBusiness/recording.svg.js                                                     0.90 kB │ gzip:  0.53 kB
-dist/components/TopAppBar/TopAppBar.style.js                                                                   0.91 kB │ gzip:  0.46 kB
 dist/components/Icon/assets/generic/search filled.svg.js                                                       0.91 kB │ gzip:  0.48 kB
+dist/components/TopAppBar/TopAppBar.style.js                                                                   0.91 kB │ gzip:  0.46 kB
 dist/icons/LicenseIcon.js                                                                                      0.91 kB │ gzip:  0.54 kB
 dist/components/Icon/assets/audioControls/rewind.svg.js                                                        0.91 kB │ gzip:  0.48 kB
 dist/components/Icon/Icon.style.js                                                                             0.91 kB │ gzip:  0.48 kB
@@ -394,8 +394,8 @@ computing gzip size...
 dist/components/Icon/assets/musicBusiness/artist.svg.js                                                        1.54 kB │ gzip:  0.81 kB
 dist/components/Drawer/Drawer.js                                                                               1.55 kB │ gzip:  0.70 kB
 dist/icons/DigitalIcon.js                                                                                      1.55 kB │ gzip:  0.78 kB
-dist/components/Controls/Switch/Switch.style.js                                                                1.55 kB │ gzip:  0.72 kB
 dist/components/Table/components/OptimizedTableRow.js                                                          1.55 kB │ gzip:  0.73 kB
+dist/components/Controls/Switch/Switch.style.js                                                                1.55 kB │ gzip:  0.72 kB
 dist/icons/ConflictIcon.js                                                                                     1.55 kB │ gzip:  0.86 kB
 dist/icons/AssetIcon.js                                                                                        1.58 kB │ gzip:  0.85 kB
 dist/icons/LockIcon.js                                                                                         1.59 kB │ gzip:  0.81 kB
@@ -605,11 +605,11 @@ computing gzip size...
 dist/icon/Icon.js                                                                                             11.30 kB │ gzip:  2.63 kB
 dist/index.js                                                                                                 13.19 kB │ gzip:  3.19 kB
 dist/sprinkles/properties.css.js                                                                             115.20 kB │ gzip: 14.54 kB
-[vite:dts] Declaration files built in 10807ms.
+[vite:dts] Declaration files built in 11443ms.
 
-✓ built in 15.36s
+✓ built in 16.06s
 
-> @orfium/ictinus@5.43.4 build:codemods /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
+> @orfium/ictinus@5.43.5 build:codemods /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
 > vite build --config vite.codemods.config.ts
 
 vite v7.3.1 building client environment for production...
@@ -642,19 +642,19 @@ computing gzip size...
 dist/codemods/drawerCodemod.cjs          1.07 kB │ gzip: 0.42 kB
 dist/codemods/unchangedIconsCodemod.cjs  1.12 kB │ gzip: 0.56 kB
 dist/codemods/globalsCodemod.cjs         6.99 kB │ gzip: 1.11 kB
-[vite:dts] Declaration files built in 848ms.
+[vite:dts] Declaration files built in 826ms.
 
 ✓ built in 1.01s
 
-> @orfium/ictinus@5.43.4 build:vanilla /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
+> @orfium/ictinus@5.43.5 build:vanilla /home/runner/work/orfium-ictinus/orfium-ictinus/packages/ictinus
 > rm -rf dist/vanilla && NODE_ENV=production rollup -c
 
 
 ./src/vanilla/index.ts → dist/vanilla...
-created dist/vanilla in 2s
+created dist/vanilla in 2.1s
 
 ./src/vanilla/index.ts → dist/vanilla...
 (!) Unresolved dependencies
 https://rollupjs.org/troubleshooting/#warning-treating-module-as-external-dependency
 csstype (imported by "node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.d.ts")
-created dist/vanilla in 3.4s
+created dist/vanilla in 3.7s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @orfium/ictinus
 
+## 5.43.5
+
+### Patch Changes
+
+- c672159: control cell props in data table
+
 ## 5.43.4
 
 ### Patch Changes

package/dist/package.json.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
   "name": "@orfium/ictinus",
-  "version": "5.43.4",
+  "version": "5.43.5",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",

package/dist/package.json.js

@@ -1,4 +1,4 @@
-const o = "5.43.4";
+const o = "5.43.5";
 export {
   o as version
 };

package/dist/src/data-table/DataTable.d.ts

@@ -1,3 +1,4 @@
+import { Row, RowData } from '@tanstack/react-table';
 import { Table } from '@tanstack/table-core';
 import { BoxProps } from '../vanilla/Box';
 export type DataTableProps = BoxProps<'div', {
@@ -426,3 +427,14 @@ export declare const DataTable: import('react').ForwardRefExoticComponent<{
     asChild?: boolean;
     className?: string;
 }>, never> & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & import('react').RefAttributes<HTMLDivElement>>;
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        align?: 'flex-start' | 'center' | 'flex-end';
+        label?: string;
+        tooltip?: string;
+        contentAlign?: 'left' | 'center' | 'right';
+    }
+    interface TableMeta<TData extends RowData> {
+        getCellProps?: (row: Row<TData>) => Omit<BoxProps<'td'>, 'size'>;
+    }
+}

package/dist/vanilla/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import react__default, { ElementType, ComponentPropsWithoutRef, ComponentProps, Ref, ReactNode } from 'react';
+import { RowData, Row } from '@tanstack/react-table';
 import { Table as Table$1 } from '@tanstack/table-core';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as react_aria_components from 'react-aria-components';
@@ -1280,6 +1281,17 @@ declare const DataTable: react.ForwardRefExoticComponent<{
     asChild?: boolean;
     className?: string;
 }>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        align?: 'flex-start' | 'center' | 'flex-end';
+        label?: string;
+        tooltip?: string;
+        contentAlign?: 'left' | 'center' | 'right';
+    }
+    interface TableMeta<TData extends RowData> {
+        getCellProps?: (row: Row<TData>) => Omit<BoxProps<'td'>, 'size'>;
+    }
+}
 
 type DataTableBodyProps = BoxProps<'div', {
     estimatedRowHeight?: number;

package/dist/vanilla/package.json.js

@@ -1,3 +1,3 @@
-var version = "5.43.4";
+var version = "5.43.5";
 
 export { version };

package/dist/vanilla/src/data-table/DataTableBody.js

@@ -19,8 +19,8 @@ import { DataTableHeaderCell } from './DataTableHeaderCell.js';
 import { DataTableRow } from './DataTableRow.js';
 import { cell, cellSizeVar, cellOffsetVar, root, totalSizeVar, rightTotalSizeVar, leftTotalSizeVar } from './DataTableBody-css.js';
 
-const COL_VIRTUALIZATION_THRESHOLD = 20;
-const ROW_VIRTUALIZATION_THRESHOLD = 20;
+const COL_VIRTUALIZATION_THRESHOLD = 25;
+const ROW_VIRTUALIZATION_THRESHOLD = 25;
 const DataTableBody = forwardRef(
   ({
     className,
@@ -134,93 +134,105 @@ const DataTableBody = forwardRef(
                   })) : virtualRows.map((virtualRow) => ({
                     row: rows[virtualRow.index],
                     virtualRow
-                  })) : rows.map((row) => ({ row, virtualRow: void 0 }))).map(({ row, virtualRow }, index) => /* @__PURE__ */ jsxs(
-                    DataTableRow,
-                    {
-                      "data-index": virtualRow?.index,
-                      display: "flex",
-                      index: virtualRow?.index ?? index,
-                      row,
-                      ref: virtualRow ? rowVirtualizer.measureElement : void 0,
-                      style: virtualRow ? {
-                        position: "absolute",
-                        transform: `translateY(${virtualRow.start}px)`
-                      } : void 0,
-                      children: [
-                        row.getLeftVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            bordered,
-                            size,
-                            justifyContent: cell$1.column.columnDef.meta?.align,
-                            pinned: true,
-                            style: {
-                              ...assignInlineVars({
-                                [cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
-                                [cellSizeVar]: `${cell$1.column.getSize()}`
-                              })
+                  })) : rows.map((row) => ({ row, virtualRow: void 0 }))).map(({ row, virtualRow }, index) => {
+                    const cellProps = table.options.meta?.getCellProps?.(row);
+                    return /* @__PURE__ */ jsxs(
+                      DataTableRow,
+                      {
+                        "data-index": virtualRow?.index,
+                        display: "flex",
+                        index: virtualRow?.index ?? index,
+                        row,
+                        ref: virtualRow ? rowVirtualizer.measureElement : void 0,
+                        style: virtualRow ? {
+                          position: "absolute",
+                          transform: `translateY(${virtualRow.start}px)`
+                        } : void 0,
+                        children: [
+                          row.getLeftVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
+                            TableCell,
+                            {
+                              bordered,
+                              size,
+                              justifyContent: cell$1.column.columnDef.meta?.align,
+                              pinned: true,
+                              ...cellProps,
+                              style: {
+                                ...assignInlineVars({
+                                  [cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
+                                  [cellSizeVar]: `${cell$1.column.getSize()}`
+                                }),
+                                ...cellProps?.style
+                              },
+                              className: cn(
+                                cell({
+                                  pinned: "left",
+                                  resizable: cell$1.column.getCanResize()
+                                }),
+                                cellProps?.className
+                              ),
+                              children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
                             },
-                            className: cn(
-                              cell({
-                                pinned: "left",
-                                resizable: cell$1.column.getCanResize()
-                              })
-                            ),
-                            children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                          },
-                          cell$1.id
-                        )),
-                        columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && /* @__PURE__ */ jsx(TableCell, { style: { width: virtualColumnsOffset } }),
-                        (columnVirtualizer.options.enabled ? virtualColumns.map((virtualCell) => {
-                          const cells = row.getCenterVisibleCells();
-                          return cells[virtualCell.index];
-                        }) : row.getCenterVisibleCells()).map((cell$1) => /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            size,
-                            bordered,
-                            justifyContent: cell$1.column.columnDef.meta?.align,
-                            style: {
-                              ...assignInlineVars({
-                                [cellSizeVar]: `${cell$1.column.getSize()}`
-                              })
+                            cell$1.id
+                          )),
+                          columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && /* @__PURE__ */ jsx(TableCell, { style: { width: virtualColumnsOffset } }),
+                          (columnVirtualizer.options.enabled ? virtualColumns.map((virtualCell) => {
+                            const cells = row.getCenterVisibleCells();
+                            return cells[virtualCell.index];
+                          }) : row.getCenterVisibleCells()).map((cell$1) => /* @__PURE__ */ jsx(
+                            TableCell,
+                            {
+                              size,
+                              bordered,
+                              justifyContent: cell$1.column.columnDef.meta?.align,
+                              ...cellProps,
+                              style: {
+                                ...assignInlineVars({
+                                  [cellSizeVar]: `${cell$1.column.getSize()}`
+                                }),
+                                ...cellProps?.style
+                              },
+                              className: cn(
+                                cell({
+                                  resizable: cell$1.column.getCanResize()
+                                }),
+                                cellProps?.className
+                              ),
+                              children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
                             },
-                            className: cn(
-                              cell({
-                                resizable: cell$1.column.getCanResize()
-                              })
-                            ),
-                            children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                          },
-                          cell$1.id
-                        )),
-                        row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            size,
-                            bordered,
-                            justifyContent: cell$1.column.columnDef.meta?.align,
-                            pinned: true,
-                            style: {
-                              ...assignInlineVars({
-                                [cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
-                                [cellSizeVar]: `${cell$1.column.getSize()}`
-                              })
+                            cell$1.id
+                          )),
+                          row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
+                            TableCell,
+                            {
+                              size,
+                              bordered,
+                              justifyContent: cell$1.column.columnDef.meta?.align,
+                              pinned: true,
+                              ...cellProps,
+                              style: {
+                                ...assignInlineVars({
+                                  [cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
+                                  [cellSizeVar]: `${cell$1.column.getSize()}`
+                                }),
+                                ...cellProps?.style
+                              },
+                              className: cn(
+                                cell({
+                                  pinned: "right",
+                                  resizable: cell$1.column.getCanResize()
+                                }),
+                                cellProps?.className
+                              ),
+                              children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
                             },
-                            className: cn(
-                              cell({
-                                pinned: "right",
-                                resizable: cell$1.column.getCanResize()
-                              })
-                            ),
-                            children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                          },
-                          cell$1.id
-                        ))
-                      ]
-                    },
-                    row.id
-                  ))
+                            cell$1.id
+                          ))
+                        ]
+                      },
+                      row.id
+                    );
+                  })
                 }
               )
             ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "5.43.4",
+  "version": "5.43.5",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",

package/src/data-table/DataTable.tsx

@@ -1,3 +1,4 @@
+import type { Row, RowData } from '@tanstack/react-table';
 import type { Table } from '@tanstack/table-core';
 
 import { forwardRef, useState } from 'react';
@@ -34,3 +35,18 @@ export const DataTable = forwardRef<HTMLDivElement, DataTableProps>(
 );
 
 DataTable.displayName = 'DataTable';
+
+declare module '@tanstack/react-table' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, unused-imports/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    align?: 'flex-start' | 'center' | 'flex-end';
+    label?: string;
+    tooltip?: string;
+    // backward compatibility with old v5 table
+    contentAlign?: 'left' | 'center' | 'right';
+  }
+
+  interface TableMeta<TData extends RowData> {
+    getCellProps?: (row: Row<TData>) => Omit<BoxProps<'td'>, 'size'>;
+  }
+}

package/src/data-table/DataTableBody.tsx

@@ -21,8 +21,8 @@ export type DataTableBodyProps = BoxProps<
   }
 >;
 
-const COL_VIRTUALIZATION_THRESHOLD = 20;
-const ROW_VIRTUALIZATION_THRESHOLD = 20;
+const COL_VIRTUALIZATION_THRESHOLD = 25;
+const ROW_VIRTUALIZATION_THRESHOLD = 25;
 
 export const DataTableBody = forwardRef<HTMLDivElement, DataTableBodyProps>(
   (
@@ -174,104 +174,117 @@ export const DataTableBody = forwardRef<HTMLDivElement, DataTableBodyProps>(
                     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>
-                ))}
+            ).map(({ row, virtualRow }, index) => {
+              const cellProps = table.options.meta?.getCellProps?.(row);
 
-                {columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && (
-                  <TableCell style={{ width: virtualColumnsOffset }} />
-                )}
+              return (
+                <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
+                      {...cellProps}
+                      style={{
+                        ...assignInlineVars({
+                          [styles.cellOffsetVar]: `${cell.column.getStart('left')}px`,
+                          [styles.cellSizeVar]: `${cell.column.getSize()}`,
+                        }),
+                        ...cellProps?.style,
+                      }}
+                      className={cn(
+                        styles.cell({
+                          pinned: 'left',
+                          resizable: cell.column.getCanResize(),
+                        }),
+                        cellProps?.className
+                      )}
+                    >
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
 
-                {(columnVirtualizer.options.enabled
-                  ? virtualColumns.map((virtualCell) => {
-                      const cells = row.getCenterVisibleCells();
+                  {columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && (
+                    <TableCell style={{ width: virtualColumnsOffset }} />
+                  )}
 
-                      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>
-                ))}
+                  {(columnVirtualizer.options.enabled
+                    ? virtualColumns.map((virtualCell) => {
+                        const cells = row.getCenterVisibleCells();
 
-                {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(),
+                        return cells[virtualCell.index];
                       })
-                    )}
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
-              </DataTableRow>
-            ))}
+                    : row.getCenterVisibleCells()
+                  ).map((cell) => (
+                    <TableCell
+                      key={cell.id}
+                      size={size}
+                      bordered={bordered}
+                      justifyContent={cell.column.columnDef.meta?.align}
+                      {...cellProps}
+                      style={{
+                        ...assignInlineVars({
+                          [styles.cellSizeVar]: `${cell.column.getSize()}`,
+                        }),
+                        ...cellProps?.style,
+                      }}
+                      className={cn(
+                        styles.cell({
+                          resizable: cell.column.getCanResize(),
+                        }),
+                        cellProps?.className
+                      )}
+                    >
+                      {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
+                      {...cellProps}
+                      style={{
+                        ...assignInlineVars({
+                          [styles.cellOffsetVar]: `${cell.column.getStart('right')}px`,
+                          [styles.cellSizeVar]: `${cell.column.getSize()}`,
+                        }),
+                        ...cellProps?.style,
+                      }}
+                      className={cn(
+                        styles.cell({
+                          pinned: 'right',
+                          resizable: cell.column.getCanResize(),
+                        }),
+                        cellProps?.className
+                      )}
+                    >
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </DataTableRow>
+              );
+            })}
           </TableBody>
         </Table>
       </Box>

package/src/data-table/react-table.d.ts

@@ -1,12 +0,0 @@
-import '@tanstack/react-table';
-
-declare module '@tanstack/react-table' {
-  // eslint-disable-next-line no-undef, @typescript-eslint/no-unused-vars, unused-imports/no-unused-vars
-  interface ColumnMeta<TData extends RowData, TValue> {
-    align?: 'flex-start' | 'center' | 'flex-end';
-    label?: string;
-    tooltip?: string;
-    // backward compatibility with old v5 table
-    contentAlign?: 'left' | 'center' | 'right';
-  }
-}