From c2576b2f0671bdd58e0f99c13894c93e90cc707b Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 11 Apr 2025 15:11:34 +0200 Subject: [PATCH] Add default Table component Signed-off-by: Charles de Dreuille --- packages/canon/report.api.md | 17 ++- .../DataTable/DataTable.stories.tsx | 103 +++++++----------- .../src/components/DataTable/DataTable.tsx | 14 ++- .../DataTable/Table/DataTableTable.tsx | 82 ++++++++++++++ .../src/components/DataTable/Table/types.ts | 19 ++++ .../canon/src/components/DataTable/index.ts | 1 + 6 files changed, 159 insertions(+), 77 deletions(-) create mode 100644 packages/canon/src/components/DataTable/Table/DataTableTable.tsx create mode 100644 packages/canon/src/components/DataTable/Table/types.ts diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md index ec859f34e6..ec53a49a92 100644 --- a/packages/canon/report.api.md +++ b/packages/canon/report.api.md @@ -231,13 +231,16 @@ export const DataTable: { DataTablePaginationProps & RefAttributes >; Table: ForwardRefExoticComponent< + DataTableTableProps & RefAttributes + >; + TableRoot: ForwardRefExoticComponent< Omit< HTMLAttributes & RefAttributes, 'ref' > & RefAttributes >; - Header: ForwardRefExoticComponent< + TableHeader: ForwardRefExoticComponent< Omit< HTMLAttributes & RefAttributes, @@ -245,7 +248,7 @@ export const DataTable: { > & RefAttributes >; - Body: ForwardRefExoticComponent< + TableBody: ForwardRefExoticComponent< Omit< HTMLAttributes & RefAttributes, @@ -253,14 +256,14 @@ export const DataTable: { > & RefAttributes >; - Row: ForwardRefExoticComponent< + TableRow: ForwardRefExoticComponent< Omit< HTMLAttributes & RefAttributes, 'ref' > & RefAttributes >; - Cell: ForwardRefExoticComponent< + TableCell: ForwardRefExoticComponent< Omit< TdHTMLAttributes & RefAttributes, @@ -268,7 +271,7 @@ export const DataTable: { > & RefAttributes >; - Head: ForwardRefExoticComponent< + TableHead: ForwardRefExoticComponent< Omit< ThHTMLAttributes & RefAttributes, @@ -288,6 +291,10 @@ export interface DataTableRootProps table: Table_2; } +// @public (undocumented) +export interface DataTableTableProps + extends React.HTMLAttributes {} + // @public (undocumented) export type Display = 'none' | 'flex' | 'block' | 'inline'; diff --git a/packages/canon/src/components/DataTable/DataTable.stories.tsx b/packages/canon/src/components/DataTable/DataTable.stories.tsx index c9f8654f18..266aedc533 100644 --- a/packages/canon/src/components/DataTable/DataTable.stories.tsx +++ b/packages/canon/src/components/DataTable/DataTable.stories.tsx @@ -45,54 +45,7 @@ export const Uncontrolled: Story = { return ( - - - {table.getHeaderGroups().map(headerGroup => ( - - {headerGroup.headers.map(header => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext(), - )} - - ); - })} - - ))} - - - {table.getRowModel().rows?.length ? ( - table.getRowModel().rows.map(row => ( - - {row.getVisibleCells().map(cell => ( - - {flexRender( - cell.column.columnDef.cell, - cell.getContext(), - )} - - ))} - - )) - ) : ( - - - No results. - - - )} - - + ); @@ -119,54 +72,72 @@ export const Controlled: Story = { return ( - - + + + + ); + }, +}; + +export const WithCustomTable: Story = { + render: () => { + const table = useReactTable({ + data, + columns, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + }); + + return ( + + + {table.getHeaderGroups().map(headerGroup => ( - + {headerGroup.headers.map(header => { return ( - + {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext(), )} - + ); })} - + ))} - - + + {table.getRowModel().rows?.length ? ( table.getRowModel().rows.map(row => ( - {row.getVisibleCells().map(cell => ( - + {flexRender( cell.column.columnDef.cell, cell.getContext(), )} - + ))} - + )) ) : ( - - + No results. - - + + )} - - + + ); diff --git a/packages/canon/src/components/DataTable/DataTable.tsx b/packages/canon/src/components/DataTable/DataTable.tsx index 83251b473b..44e32fa404 100644 --- a/packages/canon/src/components/DataTable/DataTable.tsx +++ b/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, @@ -67,10 +68,11 @@ export const DataTable = { } & React.HTMLAttributes, ) => 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, }; diff --git a/packages/canon/src/components/DataTable/Table/DataTableTable.tsx b/packages/canon/src/components/DataTable/Table/DataTableTable.tsx new file mode 100644 index 0000000000..6b0fafa67d --- /dev/null +++ b/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) => { + const { className, ...rest } = props; + const { table } = useDataTable(); + + return ( + + + {table.getHeaderGroups().map(headerGroup => ( + + {headerGroup.headers.map(header => { + return ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext(), + )} + + ); + })} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map(row => ( + + {row.getVisibleCells().map(cell => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + )) + ) : ( + + + No results. + + + )} + + + ); + }, +); + +DataTableTable.displayName = 'DataTableRoot'; + +export { DataTableTable }; diff --git a/packages/canon/src/components/DataTable/Table/types.ts b/packages/canon/src/components/DataTable/Table/types.ts new file mode 100644 index 0000000000..a4ef96c732 --- /dev/null +++ b/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 {} diff --git a/packages/canon/src/components/DataTable/index.ts b/packages/canon/src/components/DataTable/index.ts index d684c2b48c..9d8c9becbb 100644 --- a/packages/canon/src/components/DataTable/index.ts +++ b/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';