Add rank column to miner leaderboard

src/components/common/table-columns/MINER_LEADERBOARD_COLUMNS.tsx

@@ -8,8 +8,24 @@ import { formatMonetaryValue } from '@/utils/formatter';
 const columnHelper = createColumnHelper<MinerStats>();
 
 export const MINER_LEADERBOARD_COLUMNS = [
+  columnHelper.display({
+    id: 'rank',
+    header: 'Rank',
+    cell: ({ row: { index }, table: { getState } }) => {
+      const { pageIndex, pageSize } = getState().pagination;
+      const properIndex = pageIndex * pageSize + (index + 1);
+
+      return <div className="text-center">{properIndex}</div>;
+    },
+    enableSorting: false,
+    meta: {
+      header: {
+        className: 'justify-center'
+      }
+    }
+  }),
   columnHelper.accessor('id', {
-    id: 'id',
+    id: 'miner',
     header: 'Miner',
     cell: (props) => (
       <LinkWithCopy
@@ -23,12 +39,12 @@ export const MINER_LEADERBOARD_COLUMNS = [
     id: 'total_mined_blocks',
     header: 'Mined Blocks',
     cell: (props) => props.getValue(),
-    enableSorting: true
+    enableSorting: false
   }),
   columnHelper.accessor('totalRewards', {
     id: 'total_rewards',
     header: 'Total Rewards',
     cell: (props) => formatMonetaryValue(props.getValue(), 5),
-    enableSorting: true
+    enableSorting: false
   })
 ];

src/components/ui/composites/data-table/DataTable.tsx

@@ -70,7 +70,12 @@ export const DataTable = ({
                     data-sortable={header.column.getCanSort()}
                     className="data-[sortable=true]:cursor-pointer data-[sortable=true]:hover:text-muted-foreground/70"
                   >
-                    <div className="flex items-center gap-1">
+                    <div
+                      className={cn(
+                        'flex items-center gap-1',
+                        header.column.columnDef.meta?.header?.className
+                      )}
+                    >
                       {header.isPlaceholder
                         ? null
                         : flexRender(

src/types/react-table.d.ts

@@ -0,0 +1,9 @@
+import '@tanstack/react-table'; // or vue, svelte, solid, qwik, etc.
+
+declare module '@tanstack/react-table' {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    header?: {
+      className: string;
+    };
+  }
+}