Added Support for multiple pinning

Author: 1AhmedYasser

GUI/src/components/DataTable/index.tsx

@@ -166,8 +166,8 @@ const DataTable: FC<DataTableProps> = (
             <tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => (
                 <th key={header.id} style={{ width: header.column.columnDef.meta?.size, position: header.column.columnDef.meta?.sticky ? 'sticky' : undefined , 
-                  left: header.column.columnDef.meta?.sticky === 'left' ? 0 : undefined, 
-                  right: header.column.columnDef.meta?.sticky === 'right' ? 0 : undefined,
+                  left: header.column.columnDef.meta?.sticky === 'left' ? `${header.column.getAfter('left') * 0.675}px` : undefined, 
+                  right: header.column.columnDef.meta?.sticky === 'right' ? `${header.column.getAfter('right') * 0.675}px` : undefined,
                   backgroundColor: 'white', zIndex: header.column.columnDef.meta?.sticky ? 1 : 0 }}>
                   {header.isPlaceholder ? null : (
                       <Track gap={8}>
@@ -199,8 +199,8 @@ const DataTable: FC<DataTableProps> = (
           <tr key={row.id} style={table.options.meta?.getRowStyles(row)}>
             {row.getVisibleCells().map((cell) => (
               <td key={cell.id} style={{position: cell.column.columnDef.meta?.sticky ? 'sticky' : undefined , 
-                  left: cell.column.columnDef.meta?.sticky === 'left' ? 0 : undefined, 
-                  right: cell.column.columnDef.meta?.sticky === 'right' ? 0 : undefined,
+                  left: cell.column.columnDef.meta?.sticky === 'left' ? `${cell.column.getAfter('left') * 0.675}px` : undefined, 
+                  right: cell.column.columnDef.meta?.sticky === 'right' ? `${cell.column.getAfter('right') * 0.675}px` : undefined,
                   backgroundColor: 'white', zIndex: cell.column.columnDef.meta?.sticky ? 1 : 0}} >{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
             ))}
           </tr>