fix: as per cr and changeset

Author: PondC

.changeset/deep-paths-rest.md

@@ -0,0 +1,5 @@
+---
+'@genseki/react': patch
+---
+
+Add sticky column pinning style

packages/react/src/react/components/primitives/tanstack-table.tsx

@@ -11,10 +11,11 @@ import {
   type SortDirection,
   type Table as TanstackTableCore,
 } from '@tanstack/react-table'
-import clsx from 'clsx'
 
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table'
 
+import { cn } from '../../utils/cn'
+
 type RowClickHandler<T> = (row: Row<T>, e: React.MouseEvent<HTMLTableCellElement>) => void
 
 export interface TanstackTableProps<T> {
@@ -47,7 +48,7 @@ const getCommonPinningClassesAndStyle = (column: Column<any>) => {
   const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left')
   const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right')
 
-  const className = clsx(
+  const className = cn(
     isPinned ? 'sticky z-[1]' : 'relative',
     isLastLeftPinnedColumn && 'shadow-[inset_-4px_0_4px_-4px_gray]',
     isFirstRightPinnedColumn && 'shadow-[inset_4px_0_4px_-4px_gray]'
@@ -56,9 +57,6 @@ const getCommonPinningClassesAndStyle = (column: Column<any>) => {
   const style: CSSProperties = {
     left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
     right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
-    width: column.getSize(),
-    minWidth: column.getSize(),
-    maxWidth: column.getSize(),
   }
 
   return { className, style }
@@ -120,12 +118,12 @@ export function TanstackTable<T>({
               return (
                 <TableHead
                   key={normalizeColumnId(header.id)}
-                  className={clsx(
+                  className={cn(
                     'focus-visible:ring-focus ring-inset',
                     header.colSpan > 1 && 'border-bluegray-300 border-b',
                     classNames?.tableHead,
-                    header.column.columnDef.meta?.thClassName,
-                    pinnedHeaderClassName
+                    pinnedHeaderClassName,
+                    header.column.columnDef.meta?.thClassName
                   )}
                   style={pinnedHeaderStyle}
                   onClick={
@@ -136,7 +134,7 @@ export function TanstackTable<T>({
                   tabIndex={canSort ? 0 : -1}
                 >
                   <span
-                    className={clsx(
+                    className={cn(
                       'inline-flex items-center gap-2 w-full',
                       header.colSpan > 1 && 'justify-center'
                     )}
@@ -150,7 +148,7 @@ export function TanstackTable<T>({
           </TableRow>
         ))}
       </TableHeader>
-      <TableBody className={clsx(classNames?.tableBody)}>
+      <TableBody className={cn(classNames?.tableBody)}>
         {isLoading ? (
           <TableLoading table={table} />
         ) : isError ? (
@@ -162,15 +160,19 @@ export function TanstackTable<T>({
             <TableRow
               key={row.id}
               data-state={row.getIsSelected() && 'selected'}
-              className={clsx('border-b border-border last:border-b-0', classNames?.tableBodyRow)}
+              className={cn('border-b border-border last:border-b-0', classNames?.tableBodyRow)}
             >
               {row.getVisibleCells().map((cell) => {
                 const { className: pinnedCellClassName, style: pinnedCellStyle } =
                   getCommonPinningClassesAndStyle(cell.column)
                 return (
                   <TableCell
                     key={cell.id}
-                    className={clsx(classNames?.tableCell, pinnedCellClassName)}
+                    className={cn(
+                      classNames?.tableCell,
+                      pinnedCellClassName,
+                      cell.column.columnDef.meta?.tdClassName
+                    )}
                     style={pinnedCellStyle}
                     onClick={(e) => onRowClick?.(row, e)}
                   >

packages/react/src/types/tanstack.d.ts

@@ -4,5 +4,6 @@ import '@tanstack/react-table'
 declare module '@tanstack/react-table' {
   interface ColumnMeta<TData, TValue> {
     thClassName?: string
+    tdClassName?: string
   }
 }