pin columns

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/columns.tsx

@@ -47,12 +47,14 @@ export const columns: ColumnDef<Enrollment>[] = [
   {
     id: 'select',
     header: DataTableColumnHeaderSelect,
-    cell: DataTableColumnSelect
+    cell: DataTableColumnSelect,
+    meta: { className: 'w-9' }
   },
   ...columns_,
   {
-    id: 'actions',
+    id: 'action',
-    cell: ActionMenu
+    cell: ActionMenu,
+    meta: { className: 'w-12' }
   }
 ]
 

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments._index/route.tsx

@@ -89,6 +89,7 @@ export default function Route({ loaderData: { data } }: Route.ComponentProps) {
             sort={[{ id: 'created_at', desc: true }]}
             columns={columns}
             data={hits as Enrollment[]}
+            columnPinning={{ left: ['select'], right: ['action'] }}
             pageIndex={page - 1}
             pageSize={hitsPerPage}
             setSelectedRows={setSelectedRows}

apps/admin.saladeaula.digital/app/routes/_.$orgid.orders._index/columns.tsx

@@ -14,7 +14,8 @@ export const columns: ColumnDef<Order>[] = [
   {
     id: 'select',
     header: DataTableColumnHeaderSelect,
-    cell: DataTableColumnSelect
+    cell: DataTableColumnSelect,
+    meta: { className: 'w-9' }
   },
   ...columns_
 ]

apps/admin.saladeaula.digital/app/routes/_.$orgid.users._index/columns.tsx

@@ -42,12 +42,14 @@ export const columns: ColumnDef<User>[] = [
   {
     id: 'select',
     header: DataTableColumnHeaderSelect,
-    cell: DataTableColumnSelect
+    cell: DataTableColumnSelect,
+    meta: { className: 'w-9' }
   },
   ...columns_,
   {
     id: 'actions',
-    cell: ActionMenu
+    cell: ActionMenu,
+    meta: { className: 'w-12' }
   }
 ]
 

packages/ui/src/components/data-table/data-table.tsx

@@ -5,6 +5,7 @@ import {
   getCoreRowModel,
   useReactTable,
   type ColumnDef,
+  type ColumnPinningState,
   type ColumnSort,
   type RowSelectionState,
   type SortingState,
@@ -38,6 +39,7 @@ import { DataTablePagination } from './pagination'
 interface DataTableProps<TData, TValue> {
   children?: ReactNode
   columns: ColumnDef<TData, TValue>[]
+  columnPinning?: ColumnPinningState
   data: TData[]
   setSelectedRows?: (selectedRows: TData[]) => void
   pageIndex: number
@@ -67,6 +69,7 @@ export function DataTable<TData, TValue>({
   data,
   children,
   columns,
+  columnPinning = { left: [], right: [] },
   sort,
   pageIndex,
   pageSize,
@@ -192,10 +195,12 @@ export function DataTable<TData, TValue>({
       sorting,
       rowSelection,
       columnVisibility,
+      columnPinning,
       pagination: { pageIndex, pageSize }
     },
     manualSorting: true,
     manualPagination: true,
+    enableColumnPinning: true,
     enableRowSelection: true,
     getRowId,
     getCoreRowModel: getCoreRowModel(),
@@ -220,7 +225,7 @@ export function DataTable<TData, TValue>({
           <CardContent>
             {children}
 
-            <Table_ className="table-auto">
+            <Table_ className="table-auto w-full">
               <TableHeader>
                 {table.getHeaderGroups().map((headerGroup) => (
                   <TableRow
@@ -228,11 +233,18 @@ export function DataTable<TData, TValue>({
                     className="hover:bg-transparent"
                   >
                     {headerGroup.headers.map((header) => {
+                      const isPinned = header.column.getIsPinned()
+
                       return (
                         <TableHead
                           key={header.id}
                           className={cn(
+                            isPinned && 'z-1 lg:sticky bg-card',
+                            isPinned === 'left' && 'left-0',
+                            isPinned === 'right' && 'right-0',
                             'p-2.5',
+                            // Override the shadcn class
+                            '[&:has([role=checkbox])]:pr-2.5',
                             // @ts-ignore
                             header.column.columnDef.meta?.className
                           )}
@@ -252,29 +264,42 @@ export function DataTable<TData, TValue>({
 
               <TableBody>
                 {table.getRowModel().rows?.length ? (
-                  table.getRowModel().rows.map((row) => (
+                  table.getRowModel().rows.map((row) => {
-                    <TableRow
+                    const isSelected = row.getIsSelected()
-                      key={row.id}
+
-                      data-state={row.getIsSelected() && 'selected'}
+                    return (
-                      className="has-data-[state=open]:bg-muted/50"
+                      <TableRow
-                    >
+                        key={row.id}
-                      {row.getVisibleCells().map((cell) => (
+                        data-state={isSelected && 'selected'}
-                        <TableCell
+                        className="group has-data-[state=open]:bg-muted transition-none hover:bg-muted relative z-5"
-                          key={cell.id}
+                      >
-                          className={cn(
+                        {row.getVisibleCells().map((cell) => {
-                            'p-2.5',
+                          const isPinned = cell.column.getIsPinned()
-                            // @ts-ignore
+
-                            cell.column.columnDef.meta?.className
+                          return (
-                          )}
+                            <TableCell
-                        >
+                              key={cell.id}
-                          {flexRender(
+                              className={cn(
-                            cell.column.columnDef.cell,
+                                isPinned &&
-                            cell.getContext()
+                                  'lg:sticky z-1 bg-card group-hover:bg-muted group-has-data-[state=open]:bg-muted',
-                          )}
+                                isPinned && isSelected && 'bg-muted',
-                        </TableCell>
+                                isPinned === 'left' && 'left-0',
-                      ))}
+                                isPinned === 'right' && 'right-0',
-                    </TableRow>
+                                'p-2.5',
-                  ))
+                                // @ts-ignore
+                                cell.column.columnDef.meta?.className
+                              )}
+                            >
+                              {flexRender(
+                                cell.column.columnDef.cell,
+                                cell.getContext()
+                              )}
+                            </TableCell>
+                          )
+                        })}
+                      </TableRow>
+                    )
+                  })
                 ) : (
                   <TableRow>
                     <TableCell

packages/ui/src/routes/enrollments/columns.tsx

@@ -28,7 +28,9 @@ export const columns: ColumnDef<Enrollment>[] = [
       return (
         <div className="flex gap-2.5 items-center">
           <Avatar className="size-10 hidden lg:block">
-            <AvatarFallback>{initials(user.name)}</AvatarFallback>
+            <AvatarFallback className="border">
+              {initials(user.name)}
+            </AvatarFallback>
           </Avatar>
 
           <ul>

packages/ui/src/routes/users/columns.tsx

@@ -23,7 +23,7 @@ export const columns: ColumnDef<User>[] = [
       return (
         <div className="flex gap-2.5 items-center">
           <Avatar className="size-10 hidden lg:block">
-            <AvatarFallback>{initials(name)}</AvatarFallback>
+            <AvatarFallback className="border">{initials(name)}</AvatarFallback>
           </Avatar>
 
           <ul>