Add default Table component

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/report.api.md

@@ -231,13 +231,16 @@ export const DataTable: {
     DataTablePaginationProps & RefAttributes<HTMLDivElement>
   >;
   Table: ForwardRefExoticComponent<
+    DataTableTableProps & RefAttributes<HTMLTableElement>
+  >;
+  TableRoot: ForwardRefExoticComponent<
     Omit<
       HTMLAttributes<HTMLTableElement> & RefAttributes<HTMLTableElement>,
       'ref'
     > &
       RefAttributes<HTMLTableElement>
   >;
-  Header: ForwardRefExoticComponent<
+  TableHeader: ForwardRefExoticComponent<
     Omit<
       HTMLAttributes<HTMLTableSectionElement> &
         RefAttributes<HTMLTableSectionElement>,
@@ -245,7 +248,7 @@ export const DataTable: {
     > &
       RefAttributes<HTMLTableSectionElement>
   >;
-  Body: ForwardRefExoticComponent<
+  TableBody: ForwardRefExoticComponent<
     Omit<
       HTMLAttributes<HTMLTableSectionElement> &
         RefAttributes<HTMLTableSectionElement>,
@@ -253,14 +256,14 @@ export const DataTable: {
     > &
       RefAttributes<HTMLTableSectionElement>
   >;
-  Row: ForwardRefExoticComponent<
+  TableRow: ForwardRefExoticComponent<
     Omit<
       HTMLAttributes<HTMLTableRowElement> & RefAttributes<HTMLTableRowElement>,
       'ref'
     > &
       RefAttributes<HTMLTableRowElement>
   >;
-  Cell: ForwardRefExoticComponent<
+  TableCell: ForwardRefExoticComponent<
     Omit<
       TdHTMLAttributes<HTMLTableCellElement> &
         RefAttributes<HTMLTableCellElement>,
@@ -268,7 +271,7 @@ export const DataTable: {
     > &
       RefAttributes<HTMLTableCellElement>
   >;
-  Head: ForwardRefExoticComponent<
+  TableHead: ForwardRefExoticComponent<
     Omit<
       ThHTMLAttributes<HTMLTableCellElement> &
         RefAttributes<HTMLTableCellElement>,
@@ -288,6 +291,10 @@ export interface DataTableRootProps<TData>
   table: Table_2<TData>;
 }
 
+// @public (undocumented)
+export interface DataTableTableProps
+  extends React.HTMLAttributes<HTMLTableElement> {}
+
 // @public (undocumented)
 export type Display = 'none' | 'flex' | 'block' | 'inline';
 

packages/canon/src/components/DataTable/DataTable.stories.tsx

@@ -45,54 +45,7 @@ export const Uncontrolled: Story = {
 
     return (
       <DataTable.Root table={table}>
-        <DataTable.Table>
-          <DataTable.Header>
-            {table.getHeaderGroups().map(headerGroup => (
-              <DataTable.Row key={headerGroup.id}>
-                {headerGroup.headers.map(header => {
-                  return (
-                    <DataTable.Head key={header.id}>
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext(),
-                          )}
-                    </DataTable.Head>
-                  );
-                })}
-              </DataTable.Row>
-            ))}
-          </DataTable.Header>
-          <DataTable.Body>
-            {table.getRowModel().rows?.length ? (
-              table.getRowModel().rows.map(row => (
-                <DataTable.Row
-                  key={row.id}
-                  data-state={row.getIsSelected() && 'selected'}
-                >
-                  {row.getVisibleCells().map(cell => (
-                    <DataTable.Cell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext(),
-                      )}
-                    </DataTable.Cell>
-                  ))}
-                </DataTable.Row>
-              ))
-            ) : (
-              <DataTable.Row>
-                <DataTable.Cell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
-                  No results.
-                </DataTable.Cell>
-              </DataTable.Row>
-            )}
-          </DataTable.Body>
-        </DataTable.Table>
+        <DataTable.Table />
         <DataTable.Pagination />
       </DataTable.Root>
     );
@@ -119,54 +72,72 @@ export const Controlled: Story = {
 
     return (
       <DataTable.Root table={table}>
-        <DataTable.Table>
-          <DataTable.Header>
+        <DataTable.Table />
+        <DataTable.Pagination />
+      </DataTable.Root>
+    );
+  },
+};
+
+export const WithCustomTable: Story = {
+  render: () => {
+    const table = useReactTable<DataProps>({
+      data,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+    });
+
+    return (
+      <DataTable.Root table={table}>
+        <DataTable.TableRoot>
+          <DataTable.TableHeader>
             {table.getHeaderGroups().map(headerGroup => (
-              <DataTable.Row key={headerGroup.id}>
+              <DataTable.TableRow key={headerGroup.id}>
                 {headerGroup.headers.map(header => {
                   return (
-                    <DataTable.Head key={header.id}>
+                    <DataTable.TableHead key={header.id}>
                       {header.isPlaceholder
                         ? null
                         : flexRender(
                             header.column.columnDef.header,
                             header.getContext(),
                           )}
-                    </DataTable.Head>
+                    </DataTable.TableHead>
                   );
                 })}
-              </DataTable.Row>
+              </DataTable.TableRow>
             ))}
-          </DataTable.Header>
-          <DataTable.Body>
+          </DataTable.TableHeader>
+          <DataTable.TableBody>
             {table.getRowModel().rows?.length ? (
               table.getRowModel().rows.map(row => (
-                <DataTable.Row
+                <DataTable.TableRow
                   key={row.id}
                   data-state={row.getIsSelected() && 'selected'}
                 >
                   {row.getVisibleCells().map(cell => (
-                    <DataTable.Cell key={cell.id}>
+                    <DataTable.TableCell key={cell.id}>
                       {flexRender(
                         cell.column.columnDef.cell,
                         cell.getContext(),
                       )}
-                    </DataTable.Cell>
+                    </DataTable.TableCell>
                   ))}
-                </DataTable.Row>
+                </DataTable.TableRow>
               ))
             ) : (
-              <DataTable.Row>
-                <DataTable.Cell
+              <DataTable.TableRow>
+                <DataTable.TableCell
                   colSpan={columns.length}
                   className="h-24 text-center"
                 >
                   No results.
-                </DataTable.Cell>
-              </DataTable.Row>
+                </DataTable.TableCell>
+              </DataTable.TableRow>
             )}
-          </DataTable.Body>
-        </DataTable.Table>
+          </DataTable.TableBody>
+        </DataTable.TableRoot>
         <DataTable.Pagination />
       </DataTable.Root>
     );

packages/canon/src/components/DataTable/DataTable.tsx

@@ -19,6 +19,7 @@ import { Table } from '../Table';
 import { DataTableRoot } from './Root/DataTableRoot';
 import { DataTablePagination } from './Pagination/DataTablePagination';
 import { Table as TanstackTable } from '@tanstack/react-table';
+import { DataTableTable } from './Table/DataTableTable';
 
 const TableRoot = forwardRef<
   React.ElementRef<typeof Table.Root>,
@@ -67,10 +68,11 @@ export const DataTable = {
     } & React.HTMLAttributes<HTMLDivElement>,
   ) => JSX.Element,
   Pagination: DataTablePagination,
-  Table: TableRoot,
-  Header: TableHeader,
-  Body: TableBody,
-  Row: TableRow,
-  Cell: TableCell,
-  Head: TableHead,
+  Table: DataTableTable,
+  TableRoot: TableRoot,
+  TableHeader: TableHeader,
+  TableBody: TableBody,
+  TableRow: TableRow,
+  TableCell: TableCell,
+  TableHead: TableHead,
 };

packages/canon/src/components/DataTable/Table/DataTableTable.tsx

@@ -0,0 +1,82 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { DataTableTableProps } from './types';
+import { Table } from '../../Table';
+import { useDataTable } from '../Root/DataTableRoot';
+import { flexRender } from '@tanstack/react-table';
+
+/** @public */
+const DataTableTable = forwardRef(
+  (props: DataTableTableProps, ref: React.ForwardedRef<HTMLTableElement>) => {
+    const { className, ...rest } = props;
+    const { table } = useDataTable();
+
+    return (
+      <Table.Root ref={ref} className={clsx(className)} {...rest}>
+        <Table.Header>
+          {table.getHeaderGroups().map(headerGroup => (
+            <Table.Row key={headerGroup.id}>
+              {headerGroup.headers.map(header => {
+                return (
+                  <Table.Head key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </Table.Head>
+                );
+              })}
+            </Table.Row>
+          ))}
+        </Table.Header>
+        <Table.Body>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map(row => (
+              <Table.Row
+                key={row.id}
+                data-state={row.getIsSelected() && 'selected'}
+              >
+                {row.getVisibleCells().map(cell => (
+                  <Table.Cell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </Table.Cell>
+                ))}
+              </Table.Row>
+            ))
+          ) : (
+            <Table.Row>
+              <Table.Cell
+                colSpan={table.getAllColumns().length}
+                className="h-24 text-center"
+              >
+                No results.
+              </Table.Cell>
+            </Table.Row>
+          )}
+        </Table.Body>
+      </Table.Root>
+    );
+  },
+);
+
+DataTableTable.displayName = 'DataTableRoot';
+
+export { DataTableTable };

packages/canon/src/components/DataTable/Table/types.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** @public */
+export interface DataTableTableProps
+  extends React.HTMLAttributes<HTMLTableElement> {}

packages/canon/src/components/DataTable/index.ts

@@ -17,3 +17,4 @@
 export * from './DataTable';
 export * from './Root/types';
 export * from './Pagination/types';
+export * from './Table/types';