Merge pull request #32685 from grantila/grantila/bui-allow-data-to-be-passed-inplace

[BUI] Allow a 'data' prop to be passed inplace to the useTable hook

docs-ui/src/app/components/table/props-definition.tsx

@@ -36,7 +36,13 @@ export const useTableOptionsPropDefs: Record<string, PropDef> = {
     type: 'enum',
     values: ['function'],
     description:
-      'Function that returns or fetches data (required). Signature varies by mode.',
+      'Function that returns or fetches data (required for "offset" and "cursor" modes). For the "complete" mode, either this or `data` must be provided. Signature varies by mode.',
+  },
+  data: {
+    type: 'enum',
+    values: ['T[]'],
+    description:
+      'The data for the table. Only applicable for "complete" mode, and either this or `getData` must be provided.',
   },
   paginationOptions: {
     type: 'enum',

docs-ui/src/app/components/table/snippets.ts

@@ -12,7 +12,7 @@ const columns: ColumnConfig<DataType>[] = [
 function MyTable() {
   const { tableProps } = useTable({
     mode: 'complete',
-    getData: () => data,
+    data,
   });
 
   return <Table columnConfig={columns} {...tableProps} />;
@@ -39,7 +39,7 @@ const columns: ColumnConfig<typeof data[0]>[] = [
 function MyTable() {
   const { tableProps } = useTable({
     mode: 'complete',
-    getData: () => data,
+    data,
   });
 
   return <Table columnConfig={columns} {...tableProps} />;
@@ -69,7 +69,7 @@ export const tableSortingSnippet = `const columns: ColumnConfig<Item>[] = [
 
 const { tableProps } = useTable({
   mode: 'complete',
-  getData: () => data,
+  data,
   initialSort: { column: 'name', direction: 'ascending' },
   sortFn: (items, { column, direction }) => {
     return [...items].sort((a, b) => {
@@ -85,7 +85,7 @@ return <Table columnConfig={columns} {...tableProps} />;`;
 
 export const tablePaginationSnippet = `const { tableProps } = useTable({
   mode: 'complete',
-  getData: () => data,
+  data,
   paginationOptions: {
     pageSize: 10,
     pageSizeOptions: [10, 25, 50],
@@ -94,7 +94,7 @@ export const tablePaginationSnippet = `const { tableProps } = useTable({
 
 export const tableSearchSnippet = `const { tableProps, search } = useTable({
   mode: 'complete',
-  getData: () => data,
+  data,
   searchFn: (items, query) => {
     const lowerQuery = query.toLowerCase();
     return items.filter(item =>
@@ -119,7 +119,7 @@ export const tableSelectionSnippet = `const [selected, setSelected] = useState<S
 
 const { tableProps } = useTable({
   mode: 'complete',
-  getData: () => data,
+  data,
 });
 
 return (
@@ -162,7 +162,7 @@ export const tableRowActionsDisabledSnippet = `<Table
 
 export const tableEmptyStateSnippet = `const { tableProps, search } = useTable({
   mode: 'complete',
-  getData: () => data,
+  data,
   searchFn: (items, query) => { /* ... */ },
 });