SOV-4570: Extend Table component

.changeset/wicked-donuts-collect.md

@@ -0,0 +1,5 @@
+---
+"@sovryn/ui": patch
+---
+
+SOV-4570: Extend Table component

apps/frontend/src/app/5_pages/MarketMakingPage/components/AmbientMarketMaking/components/AmbientPoolsTable/AmbientPoolsTable.tsx

@@ -3,7 +3,7 @@ import React, { FC, useCallback, useMemo, useRef, useState } from 'react';
 import { t } from 'i18next';
 import { Link } from 'react-router-dom';
 
-import { Table } from '@sovryn/ui';
+import { Table, TableBreakpoint } from '@sovryn/ui';
 
 import { AssetPairRenderer } from '../../../../../../2_molecules/AssetPairRenderer/AssetPairRenderer';
 import { AssetPairSize } from '../../../../../../2_molecules/AssetPairRenderer/AssetPairRenderer.types';
@@ -79,6 +79,7 @@ export const AmbientPoolsTable: FC<AmbientPoolsProps> = ({ items }) => {
         expandedIndex={expandedIndex}
         className={styles.table}
         rowTitle={generateRowTitle}
+        breakpoint={TableBreakpoint.xl}
       />
     </div>
   );

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;
+  }
 }

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({});

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.mobile)}>
+        <TableMobile {...props} />
+      </div>
+    </>
+  );
+};

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 {

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';