feat (DataTable): add getRowId support to get unique row key (#690)

* feat: add getRowKey support to get unique row key

* chore: rename prop to match tanstack API

Author: paanSinghCoder

apps/www/src/content/docs/components/datatable/index.mdx

@@ -156,6 +156,10 @@ function MyTable() {
 
 Columns can be configured with various options:
 
+**Performance:** Pass a stable `columns` reference (e.g. define at module scope or wrap in `useMemo`) so the table doesn't recompute filters, grouping, or sort state on every render.
+
+**Row ids:** For sortable or filterable tables, pass `getRowId` so each row has a stable React key (e.g. `getRowId={(row) => row.id}` or `getRowId={(row) => row.uuid}`).
+
 ```ts
 interface DataTableColumnDef<TData, TValue> {
   accessorKey: string; // Key to access data

apps/www/src/content/docs/components/datatable/props.ts

@@ -35,6 +35,12 @@ export interface DataTableProps {
   onColumnVisibilityChange?: (
     columnVisibility: Record<string, boolean>
   ) => void;
+
+  /**
+   * Return a stable unique id for each row (used as React key).
+   * Use for sortable/filterable tables to avoid key issues when rows reorder.
+   */
+  getRowId?: (row: any, index: number) => string;
 }
 
 export interface DataTableQuery {

packages/raystack/components/data-table/__tests__/data-table.test.tsx

@@ -575,4 +575,21 @@ describe('DataTable', () => {
       expect(screen.queryByTestId('zero-state')).not.toBeInTheDocument();
     });
   });
+
+  describe('getRowId', () => {
+    it('renders with getRowId callback for stable row keys', () => {
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          defaultSort={{ name: 'name', order: 'asc' }}
+          getRowId={row => row.id}
+        >
+          <DataTable.Content />
+        </DataTable>
+      );
+      expect(screen.getByRole('table')).toBeInTheDocument();
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+  });
 });

packages/raystack/components/data-table/data-table.tsx

@@ -47,7 +47,8 @@ function DataTableRoot<TData, TValue>({
   onTableQueryChange,
   onLoadMore,
   onRowClick,
-  onColumnVisibilityChange
+  onColumnVisibilityChange,
+  getRowId
 }: React.PropsWithChildren<DataTableProps<TData, TValue>>) {
   const defaultTableQuery = useMemo(
     () => getDefaultTableQuery(defaultSort, query),
@@ -121,6 +122,7 @@ function DataTableRoot<TData, TValue>({
   const table = useReactTable({
     data: groupedData as unknown as TData[],
     columns: columnsWithFilters,
+    getRowId,
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
     getSubRows: row => (row as unknown as GroupedData<TData>)?.subRows || [],

packages/raystack/components/data-table/data-table.types.tsx

@@ -112,6 +112,8 @@ export interface DataTableProps<TData, TValue> {
   onLoadMore?: () => Promise<void>;
   onRowClick?: (row: TData) => void;
   onColumnVisibilityChange?: (columnVisibility: VisibilityState) => void;
+  /** Return a stable unique id for each row (used as React key). Use for sortable/filterable tables. */
+  getRowId?: (row: TData, index: number) => string;
 }
 
 export type DataTableContentClassNames = {