feat: add breakpoint to the table component

DistributedCollective · Nov 11, 2024 · bd1ae6e · bd1ae6e
1 parent 4566750
commit bd1ae6e
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 16 deletions.
diff --git a/packages/ui/src/2_molecules/Table/Table.module.css b/packages/ui/src/2_molecules/Table/Table.module.css
@@ -1,7 +1,24 @@
-.desktop {
-  @apply hidden lg:block;
+.md {
+  &.desktop {
+    @apply hidden md:block;
+  }
+  &.mobile {
+    @apply block md:hidden;
+  }
 }
-
-.mobile {
-  @apply block lg:hidden;
+.lg {
+  &.desktop {
+    @apply hidden lg:block;
+  }
+  &.mobile {
+    @apply block lg:hidden;
+  }
+}
+.xl {
+  &.desktop {
+    @apply hidden xl:block;
+  }
+  &.mobile {
+    @apply block xl:hidden;
+  }
 }
diff --git a/packages/ui/src/2_molecules/Table/Table.stories.tsx b/packages/ui/src/2_molecules/Table/Table.stories.tsx
@@ -141,6 +141,11 @@ Basic.argTypes = {
     description:
       'Callback which gets fired when order options need to be updated.',
   },
+  breakpoint: {
+    control: 'TableBreakpoint',
+    description:
+      'The breakpoint on which Table switches from mobile device to desktop',
+  },
 };
 
 export const NoData = Template.bind({});

diff --git a/packages/ui/src/2_molecules/Table/Table.tsx b/packages/ui/src/2_molecules/Table/Table.tsx
@@ -1,3 +1,6 @@
+import classNames from 'classnames';
+
+import { Breakpoint } from '../../types';
 import { RowObject } from '../TableBase';
 import styles from './Table.module.css';
 import { TableProps } from './Table.types';
@@ -7,13 +10,16 @@ import { TableMobile } from './components/TableMobile/TableMobile';
 // No React.FC, since doesn't support Generic PropTypes
 export const Table = <RowType extends RowObject>(
   props: TableProps<RowType>,
-) => (
-  <>
-    <div className={styles.desktop}>
-      <TableDesktop {...props} />
-    </div>
-    <div className={styles.mobile}>
-      <TableMobile {...props} />
-    </div>
-  </>
-);
+) => {
+  const breakpoint = props.breakpoint || Breakpoint.lg;
+  return (
+    <>
+      <div className={classNames(styles[breakpoint], styles.desktop)}>
+        <TableDesktop {...props} />
+      </div>
+      <div className={classNames(styles[breakpoint], styles.moblie)}>
+        <TableMobile {...props} />
+      </div>
+    </>
+  );
+};
diff --git a/packages/ui/src/2_molecules/Table/Table.types.ts b/packages/ui/src/2_molecules/Table/Table.types.ts
@@ -16,6 +16,12 @@ export type ColumnOptions<RowType extends RowObject> = {
   sampleData?: ReactNode;
 };
 
+export enum TableBreakpoint {
+  md = 'md',
+  lg = 'lg',
+  xl = 'xl',
+}
+
 export type TableProps<RowType extends RowObject> = {
   className?: string;
   rowClassName?: string;
@@ -40,6 +46,7 @@ export type TableProps<RowType extends RowObject> = {
   subtitleRenderer?: (row: RowType) => ReactNode;
   expandedIndex?: number;
   flatMode?: boolean;
+  breakpoint?: TableBreakpoint;
 };
 
 export enum OrderDirection {

diff --git a/packages/ui/src/2_molecules/Table/index.ts b/packages/ui/src/2_molecules/Table/index.ts
@@ -1,3 +1,3 @@
 export * from './Table';
-export { OrderDirection } from './Table.types';
+export { OrderDirection, TableBreakpoint } from './Table.types';
 export type { OrderOptions } from './Table.types';