@tcn/ui-table 2.3.4 → 2.3.6

package/src/__stories__/table.stories.tsx

@@ -9,7 +9,7 @@ import {
 } from '@tcn/resource-store';
 import { useSignalValue } from '@tcn/state';
 import { Button } from '@tcn/ui/actions';
-import { Box, HStack, Spacer, VStack } from '@tcn/ui/stacks';
+import { Box, HStack, Spacer, VStack, ZStack } from '@tcn/ui/stacks';
 import { VPanel } from '@tcn/ui/surfaces';
 import { Title } from '@tcn/ui/typography';
 import { GlobalSearch } from '../components/global_search.js';
@@ -22,12 +22,22 @@ import { StringFieldFilter } from '../components/table_filter_panel/field_filter
 import { TableFilterPanel } from '../components/table_filter_panel/table_filter_panel.js';
 import { TablePager } from '../components/table_pager.js';
 import { DataItem, items, stickyItems } from './sample_data.js';
+import { CrossIcon } from '@tcn/icons/cross_icon.js';
 import styles from './table.module.css';
+import { Footer, Header, Main, Rail, Side, VBody } from '@tcn/ui/layouts';
 
 const meta: Meta = {
   title: 'Table',
 };
 
+const StoryWrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <ZStack maxHeight="600px" padding="24px">
+      {children}
+    </ZStack>
+  );
+};
+
 export function Basic() {
   const [source] = useState(() => {
     return new StaticDataSource<DataItem>(items, [
@@ -42,21 +52,23 @@ export function Basic() {
   });
 
   return (
-    <Table
-      dataSource={source}
-      onRowClick={item => {
-        alert(`Clicked ${item.name}`);
-      }}
-    >
-      <TableColumn heading="Name" fieldName="name" />
-      <TableColumn heading="Age" fieldName="age" />
-      <TableColumn heading="Email" fieldName="email" />
-      <TableColumn heading="City" fieldName="city" />
-      <TableColumn heading="Country" fieldName="country" />
-      <TableColumn heading="Occupation" fieldName="occupation" />
-      <TableColumn heading="Active" fieldName="isActive" />
-      <div>Other kinds of children don't render</div>
-    </Table>
+    <StoryWrapper>
+      <Table
+        dataSource={source}
+        onRowClick={item => {
+          alert(`Clicked ${item.name}`);
+        }}
+      >
+        <TableColumn heading="Name" fieldName="name" />
+        <TableColumn heading="Age" fieldName="age" />
+        <TableColumn heading="Email" fieldName="email" />
+        <TableColumn heading="City" fieldName="city" />
+        <TableColumn heading="Country" fieldName="country" />
+        <TableColumn heading="Occupation" fieldName="occupation" />
+        <TableColumn heading="Active" fieldName="isActive" />
+        <div>Other kinds of children don't render</div>
+      </Table>
+    </StoryWrapper>
   );
 }
 
@@ -76,26 +88,28 @@ export function WithSort() {
   const currentResults = useSignalValue(source.broadcasts.currentResults);
 
   return (
-    <Table
-      dataSource={source}
-      onRowClick={item => {
-        alert(`Clicked ${item.name}`);
-      }}
-    >
-      <TableColumn heading="Name" footer="Some Names" fieldName="name" canSort />
-      <TableColumn
-        heading="Age"
-        footer={`Average Age: ${Math.round(currentResults.reduce((sum, i) => sum + i.age, 0) / currentResults.length)}`}
-        fieldName="age"
-        canSort
-        width={120}
-      />
-      <TableColumn heading="Email" fieldName="email" canSort />
-      <TableColumn heading="City" fieldName="city" canSort />
-      <TableColumn heading="Country" fieldName="country" canSort />
-      <TableColumn heading="Occupation" fieldName="occupation" canSort />
-      <TableColumn heading="Active" fieldName="isActive" canSort />
-    </Table>
+    <StoryWrapper>
+      <Table
+        dataSource={source}
+        onRowClick={item => {
+          alert(`Clicked ${item.name}`);
+        }}
+      >
+        <TableColumn heading="Name" footer="Some Names" fieldName="name" canSort />
+        <TableColumn
+          heading="Age"
+          footer={`Average Age: ${Math.round(currentResults.reduce((sum, i) => sum + i.age, 0) / currentResults.length)}`}
+          fieldName="age"
+          canSort
+          width={120}
+        />
+        <TableColumn heading="Email" fieldName="email" canSort />
+        <TableColumn heading="City" fieldName="city" canSort />
+        <TableColumn heading="Country" fieldName="country" canSort />
+        <TableColumn heading="Occupation" fieldName="occupation" canSort />
+        <TableColumn heading="Active" fieldName="isActive" canSort />
+      </Table>
+    </StoryWrapper>
   );
 }
 
@@ -116,7 +130,7 @@ export function WithRowHighlighting() {
   const [selectedRow, setSelectedRow] = useState<string | null>(null);
 
   return (
-    <div>
+    <StoryWrapper>
       <Table
         dataSource={source}
         isRowHighlighted={row => {
@@ -132,7 +146,7 @@ export function WithRowHighlighting() {
         <TableColumn heading="Occupation" fieldName="occupation" />
         <TableColumn heading="Active" fieldName="isActive" />
       </Table>
-    </div>
+    </StoryWrapper>
   );
 }
 
@@ -150,59 +164,65 @@ export function ComplexHeadersAndFooters() {
   });
 
   return (
-    <Table dataSource={source}>
-      <TableColumn
-        heading={
-          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-            <span>👤</span>
-            <span>Name</span>
-          </div>
-        }
-        footer={
-          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-            <span>Total:</span>
-            <span>{items.length}</span>
-          </div>
-        }
-        fieldName="name"
-        render={(i: DataItem) => i.name}
-      />
-      <TableColumn
-        heading={
-          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-            <span>🎂</span>
-            <span>Age</span>
-          </div>
-        }
-        footer={
-          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-            <span>Average:</span>
-            <span>
-              {Math.round(items.reduce((sum, i) => sum + i.age, 0) / items.length)}
-            </span>
-          </div>
-        }
-        fieldName="age"
-        render={(i: DataItem) => i.age}
-      />
-      <TableColumn heading="Email" fieldName="email" render={(i: DataItem) => i.email} />
-      <TableColumn heading="City" fieldName="city" render={(i: DataItem) => i.city} />
-      <TableColumn
-        heading="Country"
-        fieldName="country"
-        render={(i: DataItem) => i.country}
-      />
-      <TableColumn
-        heading="Occupation"
-        fieldName="occupation"
-        render={(i: DataItem) => i.occupation}
-      />
-      <TableColumn
-        heading="Active"
-        fieldName="isActive"
-        render={(i: DataItem) => (i.isActive ? 'Yes' : 'No')}
-      />
-    </Table>
+    <StoryWrapper>
+      <Table dataSource={source}>
+        <TableColumn
+          heading={
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <span>👤</span>
+              <span>Name</span>
+            </div>
+          }
+          footer={
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <span>Total:</span>
+              <span>{items.length}</span>
+            </div>
+          }
+          fieldName="name"
+          render={(i: DataItem) => i.name}
+        />
+        <TableColumn
+          heading={
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <span>🎂</span>
+              <span>Age</span>
+            </div>
+          }
+          footer={
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <span>Average:</span>
+              <span>
+                {Math.round(items.reduce((sum, i) => sum + i.age, 0) / items.length)}
+              </span>
+            </div>
+          }
+          fieldName="age"
+          render={(i: DataItem) => i.age}
+        />
+        <TableColumn
+          heading="Email"
+          fieldName="email"
+          render={(i: DataItem) => i.email}
+        />
+        <TableColumn heading="City" fieldName="city" render={(i: DataItem) => i.city} />
+        <TableColumn
+          heading="Country"
+          fieldName="country"
+          render={(i: DataItem) => i.country}
+        />
+        <TableColumn
+          heading="Occupation"
+          fieldName="occupation"
+          render={(i: DataItem) => i.occupation}
+        />
+        <TableColumn
+          heading="Active"
+          fieldName="isActive"
+          render={(i: DataItem) => (i.isActive ? 'Yes' : 'No')}
+        />
+      </Table>
+    </StoryWrapper>
   );
 }
 
@@ -220,7 +240,7 @@ export function WithStickyActionsColumn() {
   });
 
   return (
-    <div style={{ width: '600px', height: '400px' }}>
+    <StoryWrapper>
       <Table
         dataSource={source}
         onRowClick={item => {
@@ -237,47 +257,33 @@ export function WithStickyActionsColumn() {
         <TableColumn
           heading="Actions"
           sticky="end"
-          width={120}
+          width={144}
           render={(item: DataItem) => (
-            <div style={{ display: 'flex', gap: '4px', justifyContent: 'center' }}>
-              <button
+            <HStack gap="4px">
+              <Button
+                size="sm"
                 onClick={e => {
                   e.stopPropagation();
-                  alert(`Edit ${item.name}`);
-                }}
-                style={{
-                  padding: '4px 8px',
-                  fontSize: '12px',
-                  border: '1px solid #ccc',
-                  borderRadius: '4px',
-                  background: '#f0f0f0',
-                  cursor: 'pointer',
+                  alert(`Edit ${JSON.stringify(item)}`);
                 }}
               >
                 Edit
-              </button>
-              <button
+              </Button>
+              <Button
+                size="sm"
+                severity="dangerous"
                 onClick={e => {
                   e.stopPropagation();
-                  alert(`Delete ${item.name}`);
-                }}
-                style={{
-                  padding: '4px 8px',
-                  fontSize: '12px',
-                  border: '1px solid #ff6b6b',
-                  borderRadius: '4px',
-                  background: '#ff6b6b',
-                  color: 'white',
-                  cursor: 'pointer',
+                  alert(`Delete ${JSON.stringify(item)}`);
                 }}
               >
                 Delete
-              </button>
-            </div>
+              </Button>
+            </HStack>
           )}
         />
       </Table>
-    </div>
+    </StoryWrapper>
   );
 }
 
@@ -295,32 +301,34 @@ export function WithTableHeaderAndTableFooter() {
   });
 
   return (
-    <VPanel>
-      <HStack className={styles.header} padding="8px" vAlign="center">
-        <Title>The Table</Title>
-        <Spacer />
-        <GlobalSearch dataSource={source} />
-      </HStack>
-      <VStack height="flex">
-        <Table
-          dataSource={source}
-          onRowClick={item => {
-            alert(`Clicked ${item.name}`);
-          }}
-        >
-          <TableColumn heading="Name" fieldName="name" />
-          <TableColumn heading="Age" fieldName="age" />
-          <TableColumn heading="Email" fieldName="email" />
-          <TableColumn heading="City" fieldName="city" />
-          <TableColumn heading="Country" fieldName="country" />
-          <TableColumn heading="Occupation" fieldName="occupation" />
-          <TableColumn heading="Active" fieldName="isActive" />
-        </Table>
-      </VStack>
-      <HStack padding="8px">
-        <TablePager dataSource={source} />
-      </HStack>
-    </VPanel>
+    <StoryWrapper>
+      <VPanel>
+        <Header className={styles.header} padding="8px" vAlign="center">
+          <Title>The Table</Title>
+          <Spacer />
+          <GlobalSearch dataSource={source} />
+        </Header>
+        <VBody height="flex">
+          <Table
+            dataSource={source}
+            onRowClick={item => {
+              alert(`Clicked ${item.name}`);
+            }}
+          >
+            <TableColumn heading="Name" fieldName="name" />
+            <TableColumn heading="Age" fieldName="age" />
+            <TableColumn heading="Email" fieldName="email" />
+            <TableColumn heading="City" fieldName="city" />
+            <TableColumn heading="Country" fieldName="country" />
+            <TableColumn heading="Occupation" fieldName="occupation" />
+            <TableColumn heading="Active" fieldName="isActive" />
+          </Table>
+        </VBody>
+        <Footer>
+          <TablePager dataSource={source} />
+        </Footer>
+      </VPanel>
+    </StoryWrapper>
   );
 }
 
@@ -348,29 +356,39 @@ export function WithStickyItems() {
   }, []);
 
   return (
-    <VStack height="100%">
-      <Table dataSource={source} stickyItems={stickyThings}>
-        <TableColumn heading="Name" fieldName="name" sticky="start" />
-        <TableColumn heading="Age" fieldName="age" width={150} />
-        <TableColumn heading="Email" fieldName="email" width={300} />
-        <TableColumn heading="City" fieldName="city" width={300} />
-        <TableColumn heading="Country" fieldName="country" width={200} />
-        <TableColumn heading="Occupation" fieldName="occupation" width={200} />
-        <TableColumn heading="Active" fieldName="isActive" />
-        <TableColumn
-          heading="Actions"
-          sticky="end"
-          width={120}
-          render={(item: DataItem) => {
-            if (stickyThings.includes(item)) {
-              return <Button onClick={() => dismissStickyThing(item)}>x</Button>;
-            }
-            return null;
-          }}
-        />
-      </Table>
-      <TablePager dataSource={source} />
-    </VStack>
+    <StoryWrapper>
+      <VStack height="100%" gap="8px">
+        <Table dataSource={source} stickyItems={stickyThings}>
+          <TableColumn heading="Name" fieldName="name" sticky="start" />
+          <TableColumn heading="Age" fieldName="age" width={150} />
+          <TableColumn heading="Email" fieldName="email" width={300} />
+          <TableColumn heading="City" fieldName="city" width={300} />
+          <TableColumn heading="Country" fieldName="country" width={200} />
+          <TableColumn heading="Occupation" fieldName="occupation" width={200} />
+          <TableColumn heading="Active" fieldName="isActive" />
+          <TableColumn
+            heading="Actions"
+            sticky="end"
+            width={120}
+            render={(item: DataItem) => {
+              if (stickyThings.includes(item)) {
+                return (
+                  <Button
+                    utility
+                    hierarchy="tertiary"
+                    onClick={() => dismissStickyThing(item)}
+                  >
+                    <CrossIcon />
+                  </Button>
+                );
+              }
+              return null;
+            }}
+          />
+        </Table>
+        <TablePager dataSource={source} />
+      </VStack>
+    </StoryWrapper>
   );
 }
 
@@ -390,33 +408,52 @@ export function WithFilterPanel() {
   });
 
   return (
-    <VStack height="100%">
-      <HStack height="100%" vAlign="start" gap="8px">
-        <Box width="300px" height="100%" enableResizeOnEnd>
-          <TableFilterPanel dataSource={source}>
-            <StringFieldFilter fieldName="name" label="Name (string)" />
-            <NumberFieldFilter fieldName="age" label="Age (number)" />
-            <DateFieldFilter fieldName="birthdate" label="Birthdate (date range)" />
-            <NumberRangeFieldFilter fieldName="age" label="Age (number range)" />
-          </TableFilterPanel>
-        </Box>
-        <Table dataSource={source} height="100%" width="flex">
-          <TableColumn heading="Name" fieldName="name" sticky="start" />
-          <TableColumn heading="Age" fieldName="age" width={150} canSort />
-          <TableColumn heading="Email" fieldName="email" width={300} />
-          <TableColumn heading="City" fieldName="city" width={300} />
-          <TableColumn
-            heading="Birthdate"
-            fieldName="birthdate"
-            width={300}
-            render={(i: DataItem) => i.birthdate.toLocaleDateString()}
-          />
-          <TableColumn heading="Occupation" fieldName="occupation" width={200} />
-          <TableColumn heading="Active" fieldName="isActive" />
-        </Table>
-      </HStack>
-      <TablePager dataSource={source} />
-    </VStack>
+    <StoryWrapper>
+      <VPanel height="100%">
+        <Header>The Table</Header>
+        <VBody>
+          <Rail>
+            <Side>
+              <Box
+                minWidth="300px"
+                enableResizeOnEnd
+                overflowY="auto"
+                height="100%"
+                style={{
+                  scrollbarGutter: 'stable', // Not sure if there is a better way to prevent the scrollbar appearing causing a horizontal scroll - to to resizing, we fix the width of the content, so adding a vertical scrollbar causing a horizontal overflow.
+                }}
+              >
+                <TableFilterPanel dataSource={source}>
+                  <StringFieldFilter fieldName="name" label="Name (string)" />
+                  <NumberFieldFilter fieldName="age" label="Age (number)" />
+                  <DateFieldFilter fieldName="birthdate" label="Birthdate (date range)" />
+                  <NumberRangeFieldFilter fieldName="age" label="Age (number range)" />
+                </TableFilterPanel>
+              </Box>
+            </Side>
+            <Main>
+              <Table dataSource={source} height="100%" width="flex">
+                <TableColumn heading="Name" fieldName="name" sticky="start" />
+                <TableColumn heading="Age" fieldName="age" width={150} canSort />
+                <TableColumn heading="Email" fieldName="email" width={300} />
+                <TableColumn heading="City" fieldName="city" width={300} />
+                <TableColumn
+                  heading="Birthdate"
+                  fieldName="birthdate"
+                  width={300}
+                  render={(i: DataItem) => i.birthdate.toLocaleDateString()}
+                />
+                <TableColumn heading="Occupation" fieldName="occupation" width={200} />
+                <TableColumn heading="Active" fieldName="isActive" />
+              </Table>
+            </Main>
+          </Rail>
+        </VBody>
+        <Footer>
+          <TablePager dataSource={source} />
+        </Footer>
+      </VPanel>
+    </StoryWrapper>
   );
 }
 

package/src/components/cells/cell.module.css

@@ -7,13 +7,13 @@
 .table-cell[data-stick-to="end"] {
   position: sticky;
   top: 0;
-  right: var(--end-offset, -1px);
+  right: var(--end-offset, 0);
 }
 
 .table-cell[data-stick-to="start"]:dir(rtl) {
   position: sticky;
   top: 0;
-  right: var(--start-offset, -1px);
+  right: var(--start-offset, 0);
 }
 
 .table-cell[data-stick-to="end"]:dir(rtl) {
@@ -22,38 +22,20 @@
   left: var(--end-offset, 0);
 }
 
-.table-cell[data-is-last-sticky-start="true"] > div {
-  border-inline-end: 1px solid #ccc;
-}
-
-:global(.dark-mode) .table-cell[data-is-last-sticky-start="true"] > div {
-  border-inline-end: 1px solid #202020;
-}
-
-.table-cell[data-is-last-sticky-end="true"] > div {
-  border-inline-start: 1px solid #ccc;
-}
-
-:global(.dark-mode) .table-cell[data-is-last-sticky-end="true"] div {
-  border-inline-start: 1px solid #202020;
-}
-
-.table-cell[data-no-border="true"] {
-  border-inline: none;
-}
-
 /* Sticky row cells */
-
 .sticky-row-table-cell {
+  /* FIXME: vvv should be on theme ideally. */
+  --material: #cccccc;
+  background-color: #cccccc;
+  /* FIXME:  ^^^ Hack to make ergo theme happy. -- will refactor into ui/theme in a future issue */
   position: sticky;
-  top: 22px; /* The header row height */
   z-index: 1;
 }
 
 .sticky-row-table-cell[data-stick-to="start"] {
   position: sticky;
   top: 0;
-  left: var(--start-offset, 0);
+  left: var(--start-offset, -1px);
   z-index: 2;
 }
 
@@ -77,23 +59,3 @@
   left: var(--end-offset, 0);
   z-index: 2;
 }
-
-.sticky-row-table-cell[data-is-last-sticky-start="true"] > div {
-  border-inline-end: 1px solid #ccc;
-}
-
-:global(.dark-mode) .sticky-row-table-cell[data-is-last-sticky-start="true"] > div {
-  border-inline-end: 1px solid #202020;
-}
-
-.sticky-row-table-cell[data-is-last-sticky-end="true"] > div {
-  border-inline-start: 1px solid #ccc;
-}
-
-:global(.dark-mode) .sticky-row-table-cell[data-is-last-sticky-end="true"] {
-  border-inline-start: 1px solid #202020;
-}
-
-.sticky-row-table-cell[data-no-border="true"] {
-  border-inline: none;
-}

package/src/components/cells/data_cell.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import cellStyles from './cell.module.css';
+import { TD } from '@tcn/ui/layouts';
 
 export type DataCellProps = {
   content: React.ReactNode;
@@ -10,7 +11,7 @@ export type DataCellProps = {
 
 export function DataCell({ content, sticky, width }: DataCellProps) {
   return (
-    <td className={cellStyles['table-cell']} data-stick-to={sticky}>
+    <TD className={cellStyles['table-cell']} data-stick-to={sticky}>
       <div
         style={{
           width: `${width}px`,
@@ -20,6 +21,6 @@ export function DataCell({ content, sticky, width }: DataCellProps) {
       >
         {content}
       </div>
-    </td>
+    </TD>
   );
 }

package/src/components/cells/footer_cell.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import cellStyles from './cell.module.css';
+import { TD } from '@tcn/ui/layouts';
 
 export type FooterCellProps = {
   content: React.ReactNode;
@@ -10,7 +11,7 @@ export type FooterCellProps = {
 
 export function FooterCell({ content, sticky, width }: FooterCellProps) {
   return (
-    <td className={cellStyles['table-cell']} data-stick-to={sticky}>
+    <TD className={cellStyles['table-cell']} data-stick-to={sticky}>
       <div
         style={{
           width: `${width}px`,
@@ -20,6 +21,6 @@ export function FooterCell({ content, sticky, width }: FooterCellProps) {
       >
         {content}
       </div>
-    </td>
+    </TD>
   );
 }