Merge pull request #321 from softnetics/supakorn/fix/components

fix: table shadow and table example.

Author: SupakornNetsuwan

.changeset/moody-moose-argue.md

@@ -0,0 +1,6 @@
+---
+'@example/ui-playground': patch
+'@genseki/ui': patch
+---
+
+fix: table shadow and table example.

examples/ui-playground/src/app/playground/shadcn/table/page.tsx

@@ -483,7 +483,7 @@ function BasicStickyColumnTable() {
     getPaginationRowModel: getPaginationRowModel(),
     columns,
     state: {
-      columnPinning: { left: ['id'] },
+      columnPinning: { left: ['id'], right: ['notes'] },
       pagination: { pageIndex: pageIndex, pageSize: pageSize },
     },
   })
@@ -495,7 +495,7 @@ function BasicStickyColumnTable() {
     <TanstackTableContainer>
       <TanstackTable table={table} />
 
-      <PaginationBarContainer>
+      <PaginationBarContainer className="sticky left-0 bottom-0">
         <Pagination>
           <PaginationContent>
             <PaginationItem disabled={firstLage}>

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

@@ -50,15 +50,16 @@ const getCommonPinningClassesAndStyle = (column: Column<any>) => {
   const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left')
   const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right')
 
-  const className = cn(
-    isPinned ? 'sticky z-[1]' : 'relative',
-    isLastLeftPinnedColumn && 'shadow-[inset_-4px_0_4px_-4px_gray]',
-    isFirstRightPinnedColumn && 'shadow-[inset_4px_0_4px_-4px_gray]'
-  )
+  const className = cn(isPinned ? 'sticky z-[1]' : 'relative')
 
   const style: CSSProperties = {
     left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
     right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
+    boxShadow: isLastLeftPinnedColumn
+      ? 'inset -4px 0 4px -4px #bbbbbb'
+      : isFirstRightPinnedColumn
+        ? 'inset 4px 0 4px -4px #bbbbbb'
+        : undefined,
     width: column.getSize(),
   }