28 lines
735 B
TypeScript
28 lines
735 B
TypeScript
import { type ReactNode, forwardRef } from 'react';
|
|
import { Table } from '@mantine/core';
|
|
import { useMediaQuery } from '@mantine/hooks';
|
|
|
|
type ResponsiveTableContainerProps = Omit<
|
|
React.ComponentProps<typeof Table.ScrollContainer>,
|
|
'children'
|
|
> & {
|
|
children: ReactNode;
|
|
};
|
|
|
|
export const ResponsiveTableContainer = forwardRef<
|
|
HTMLDivElement,
|
|
ResponsiveTableContainerProps
|
|
>(({ children, ...rest }, ref) => {
|
|
const isNarrow = useMediaQuery('(max-width: 700px)');
|
|
|
|
return isNarrow ? (
|
|
<Table.ScrollContainer ref={ref} {...rest}>
|
|
{children}
|
|
</Table.ScrollContainer>
|
|
) : (
|
|
<>{children}</>
|
|
);
|
|
});
|
|
|
|
ResponsiveTableContainer.displayName = 'ResponsiveTableContainer';
|