diff --git a/.changeset/thin-insects-cough.md b/.changeset/thin-insects-cough.md new file mode 100644 index 0000000000..db24462503 --- /dev/null +++ b/.changeset/thin-insects-cough.md @@ -0,0 +1,7 @@ +--- +'@backstage/ui': patch +--- + +Added `className` and `style` props to the `Table` component. + +Affected components: Table diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index 7643469bdc..ca9d2bcff1 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -1532,6 +1532,8 @@ export function Table({ rowConfig, selection, emptyState, + className, + style, }: TableProps): JSX_2.Element; // @public (undocumented) @@ -1638,6 +1640,8 @@ export type TablePaginationType = NoPagination | PagePagination; // @public (undocumented) export interface TableProps { + // (undocumented) + className?: string; // (undocumented) columnConfig: readonly ColumnConfig[]; // (undocumented) @@ -1658,6 +1662,8 @@ export interface TableProps { selection?: TableSelection; // (undocumented) sort?: SortState; + // (undocumented) + style?: React.CSSProperties; } // @public (undocumented) diff --git a/packages/ui/src/components/Table/components/Table.tsx b/packages/ui/src/components/Table/components/Table.tsx index 103a1aece9..fd6e595eba 100644 --- a/packages/ui/src/components/Table/components/Table.tsx +++ b/packages/ui/src/components/Table/components/Table.tsx @@ -96,6 +96,8 @@ export function Table({ rowConfig, selection, emptyState, + className, + style, }: TableProps) { const liveRegionId = useId(); @@ -113,11 +115,19 @@ export function Table({ } = selection || {}; if (loading && !data) { - return
Loading...
; + return ( +
+ Loading... +
+ ); } if (error) { - return
Error: {error.message}
; + return ( +
+ Error: {error.message} +
+ ); } const liveRegionLabel = useLiveRegionLabel( @@ -127,7 +137,7 @@ export function Table({ ); return ( -
+
{liveRegionLabel} diff --git a/packages/ui/src/components/Table/types.ts b/packages/ui/src/components/Table/types.ts index 380be8817c..6ba44b6697 100644 --- a/packages/ui/src/components/Table/types.ts +++ b/packages/ui/src/components/Table/types.ts @@ -133,4 +133,6 @@ export interface TableProps { rowConfig?: RowConfig | RowRenderFn; selection?: TableSelection; emptyState?: ReactNode; + className?: string; + style?: React.CSSProperties; }