Table responsive wrapper (#23)

glebovsky · web-flow · commit 5a0e3fa8b444 · 2022-03-09T18:57:31.000+06:00
diff --git a/components/layout/table/Table.es6.js b/components/layout/table/Table.es6.js
@@ -13,12 +13,23 @@ type Props = {
   padding?: 'compact' | 'comfortable',
   verticalAlign: 'top' | 'middle',
   background: 'light' | 'transparent',
+  responsive?: boolean,
   children: React.ChildrenArray<TableHeadType | TableBodyType> | TableHeadType | TableBodyType
 }
 
-function Table ({ className, cardLike, padding, verticalAlign, children, background, ...otherProps }: Props) {
+function Table ({
+  className,
+  cardLike,
+  padding,
+  verticalAlign,
+  children,
+  background,
+  responsive = false,
+  ...otherProps
+}: Props) {
   const wrapperClasses = classnames({
-    'ds-table-wrapper': cardLike
+    'ds-table-wrapper': cardLike,
+    'ds-table-responsive': responsive
   })
   const tableClasses = classnames(
     'ds-table',
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@b12/metronome",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "",
   "main": "index.es6.js",
   "scripts": {
diff --git a/src/index.html b/src/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>B12 Design System</title>
+  <title>Metronome</title>
 </head>
 <body>
   <section id="index"></section>
diff --git a/src/react-demo/Table.es6.js b/src/react-demo/Table.es6.js
@@ -30,6 +30,12 @@ const TABLE_PROPS = [
     value: 'light | transparent',
     defaultValue: 'light',
     description: 'Table background color'
+  },
+  {
+    property: 'responsive',
+    value: 'boolean',
+    defaultValue: 'false',
+    description: 'Responsive table (horizontal scroll)'
   }
 ]
 
@@ -133,6 +139,44 @@ import TablePagination from '@b12/design-system/components/layout/table/TablePag
           <DemoSimpleTable />
         </CodeExample>
       </div>
+      <div className="ds-block">
+        <div className="ds-block__title">
+          <h4>Responsive table</h4>
+          <p>Adding <code>responsive</code> prop allows table to be scrollable horizontally on smaller devices.</p>
+        </div>
+
+        <CodeExample code={`<Table
+  responsive
+  cardLike
+>
+  <TableHead>
+    <TableRow>
+      {rows.map(row => (
+        <TableCell
+          key={row.id}
+          align={row.numeric ? 'center' : 'left'}
+        >{row.label}</TableCell>
+      ))}
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    {data.map(row => (
+      <TableRow key={row.id}>
+        <TableCell>{row.name}</TableCell>
+        <TableCell>{row.calories}</TableCell>
+        <TableCell>{row.fat}</TableCell>
+        <TableCell>{row.carbs}</TableCell>
+        <TableCell>{row.protein}</TableCell>
+      </TableRow>
+    ))}
+  </TableBody>
+</Table>`}>
+          <DemoSimpleTable
+            responsive
+            cardLike
+          />
+        </CodeExample>
+      </div>
       <div className="ds-block">
         <div className="ds-block__title">
           <h4>Table with wrapper (card-like table)</h4>
diff --git a/style/_table.scss b/style/_table.scss
@@ -20,6 +20,20 @@
   }
 }
 
+.ds-table-responsive {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+
+  @media (max-width: 825px) {
+    .ds-table {
+      td,
+      th {
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
 .ds-table {
   border-collapse: collapse;
   box-sizing: border-box;

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@b12/metronome",`
`3`		`- "version": "1.0.2",`
	`3`	`+ "version": "1.0.3",`
`4`	`4`	`"description": "",`
`5`	`5`	`"main": "index.es6.js",`
`6`	`6`	`"scripts": {`