From 5a767f5c8abf8dbc5677e590d2385037ff6e72b4 Mon Sep 17 00:00:00 2001
From: Emma Indal <emma.indahl@gmail.com>
Date: Thu, 4 Sep 2025 13:22:34 +0200
Subject: [PATCH] update docs for table component

Signed-off-by: Emma Indal <emma.indahl@gmail.com>
---
 docs-ui/src/content/components/table.props.ts | 38 ++++++++-----------
 1 file changed, 16 insertions(+), 22 deletions(-)

diff --git a/docs-ui/src/content/components/table.props.ts b/docs-ui/src/content/components/table.props.ts
index 87be472609..1b40055849 100644
--- a/docs-ui/src/content/components/table.props.ts
+++ b/docs-ui/src/content/components/table.props.ts
@@ -217,18 +217,18 @@ export const cellPropDefs: Record<string, PropDef> = {
 };
 
 export const tablePaginationPropDefs: Record<string, PropDef> = {
-  pageIndex: {
+  offset: {
     type: 'number',
-    description: 'The current page index.',
+    description: 'The current offset (starting index) for pagination.',
   },
   pageSize: {
     type: 'number',
     description: 'The number of items per page.',
   },
-  setPageIndex: {
+  setOffset: {
     type: 'enum',
-    values: ['(pageIndex: number) => void'],
-    description: 'Handler that is called when the page index changes.',
+    values: ['(offset: number) => void'],
+    description: 'Handler that is called when the offset changes.',
   },
   setPageSize: {
     type: 'enum',
@@ -277,10 +277,7 @@ export const tableUsageSnippet = `import { Cell, ..., TableHeader, TablePaginati
 </Table>
 <TablePagination />`;
 
-export const tableBasicSnippet = `import { Table, TablePagination } from '@backstage/ui';
-
-const [pageIndex, setPageIndex] = useState(0);
-const [pageSize, setPageSize] = useState(5);
+export const tableBasicSnippet = `import { Table, TableHeader, Column, TableBody, Row, Cell, CellProfile, TablePagination, useTable } from '@backstage/ui';
 
 const data = [
   {
@@ -293,10 +290,13 @@ const data = [
   // ... more data
 ];
 
-const newData = data4.slice(
-  pageIndex * pageSize,
-  (pageIndex + 1) * pageSize,
-);
+// Uncontrolled pagination (easiest)
+const { data: paginatedData, paginationProps } = useTable({
+  data,
+  pagination: {
+    defaultPageSize: 5,
+  },
+});
 
 <Table>
   <TableHeader>
@@ -306,9 +306,9 @@ const newData = data4.slice(
     <Column>Albums</Column>
   </TableHeader>
   <TableBody>
-    {newData.map(item => (
+    {paginatedData?.map(item => (
       <Row key={item.name}>
-        <CellProfileBUI
+        <CellProfile
           name={item.name}
           src={item.image}
           href={item.website}
@@ -320,10 +320,4 @@ const newData = data4.slice(
     ))}
   </TableBody>
 </Table>
-<TablePagination
-  pageIndex={pageIndex}
-  pageSize={pageSize}
-  rowCount={data4.length}
-  setPageIndex={setPageIndex}
-  setPageSize={setPageSize}
-/>`;
+<TablePagination {...paginationProps} />`;