Merge pull request #32377 from samarthsinh2660/fix/table-filters-title-layout

fix(core-components): fix Table layout when filters and title are used together

.changeset/fix-table-filters-title-layout.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Fixed Table component layout when both `filters` and `title` props are used together. The filter controls now use a dedicated CSS class (`filterControls`) instead of incorrectly reusing the root container class.

packages/core-components/report.api.md

@@ -512,7 +512,7 @@ export function FeatureCalloutCircular(
 ): JSX_2.Element;
 
 // @public (undocumented)
-export type FiltersContainerClassKey = 'root' | 'title';
+export type FiltersContainerClassKey = 'root' | 'filterControls' | 'title';
 
 // @public
 export function Gauge(props: GaugeProps): JSX_2.Element;

packages/core-components/src/components/Table/Table.test.tsx

@@ -209,6 +209,23 @@ describe('<Table />', () => {
     expect(rendered.getByText('subtitle')).toBeInTheDocument();
   });
 
+  it('renders with both title and filters without layout issues', async () => {
+    const rendered = await renderInTestApp(
+      <Table
+        title="My Table"
+        filters={[
+          {
+            column: column1.title,
+            type: 'select',
+          },
+        ]}
+        {...minProps}
+      />,
+    );
+    expect(rendered.getByText('My Table')).toBeInTheDocument();
+    expect(rendered.getByText('Filters (0)')).toBeInTheDocument();
+  });
+
   it('renders custom empty component if empty', async () => {
     const rendered = await renderInTestApp(
       <Table

packages/core-components/src/components/Table/Table.tsx

@@ -178,7 +178,7 @@ const StyledMTableToolbar = withStyles(
 )(MTableToolbar);
 
 /** @public */
-export type FiltersContainerClassKey = 'root' | 'title';
+export type FiltersContainerClassKey = 'root' | 'filterControls' | 'title';
 
 const useFilterStyles = makeStyles(
   theme => ({
@@ -188,6 +188,10 @@ const useFilterStyles = makeStyles(
       justifyContent: 'space-between',
       flexWrap: 'wrap',
     },
+    filterControls: {
+      display: 'flex',
+      alignItems: 'center',
+    },
     title: {
       fontWeight: theme.typography.fontWeightBold,
       fontSize: 18,
@@ -316,7 +320,7 @@ export function TableToolbar(toolbarProps: {
   if (hasFilters) {
     return (
       <Box className={filtersClasses.root}>
-        <Box className={filtersClasses.root}>
+        <Box className={filtersClasses.filterControls}>
           <IconButton onClick={toggleFilters} aria-label="filter list">
             <FilterList />
           </IconButton>