fix(mantine): add data-loading attribute on table component (#3731)

* fix(mantine): add data-loading attribute on table component * Update packages/mantine/src/components/table/__tests__/Table.spec.tsx Co-authored-by: Germain Bergeron <[email protected]> --------- Co-authored-by: Germain Bergeron <[email protected]>
coveo · May 29, 2024 · a4ad0c9 · a4ad0c9
1 parent 5018de3
commit a4ad0c9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/packages/mantine/src/components/table/Table.tsx b/packages/mantine/src/components/table/Table.tsx
@@ -229,7 +229,7 @@ export const Table = <T,>(props: TableProps<T> & {ref?: ForwardedRef<HTMLDivElem
                         noData
                     ) : (
                         <>
-                            <Box component="table" {...getStyles('table')} pb="sm">
+                            <Box component="table" {...getStyles('table')} pb="sm" mod={{loading}}>
                                 <thead {...getStyles('header')}>
                                     {!!header ? (
                                         <tr>

diff --git a/packages/mantine/src/components/table/__tests__/Table.spec.tsx b/packages/mantine/src/components/table/__tests__/Table.spec.tsx
@@ -62,6 +62,17 @@ describe('Table', () => {
     });
 
     describe('when it is loading', () => {
+        it('indicates the table element as loading', () => {
+            const Fixture = ({loading}: {loading: boolean}) => {
+                const store = useTable<RowData>();
+                return <Table store={store} loading={loading} data={[]} columns={columns} />;
+            };
+            const {rerender} = render(<Fixture loading />);
+            expect(screen.getByRole('table')).toHaveAttribute('data-loading', 'true');
+            rerender(<Fixture loading={false} />);
+            expect(screen.getByRole('table')).not.toHaveAttribute('data-loading');
+        });
+
         it('shows a loading animation over the no data children (filtered)', () => {
             const Fixture = () => {
                 const store = useTable<RowData>({initialState: {globalFilter: 'something'}});