stories: add table with context menu in the header

zakodium-oss · Jan 18, 2023 · 61ed7c9 · 61ed7c9
1 parent 06ce564
commit 61ed7c9
Showing 1 changed file with 74 additions and 1 deletion.
diff --git a/stories/components/dropdown.stories.tsx b/stories/components/dropdown.stories.tsx
@@ -17,7 +17,8 @@ import {
   MenuItems,
   MenuOptions,
 } from '../../src/components/dropdown-menu/MenuItems';
-import { DropdownMenu } from '../../src/components/index';
+import { DropdownMenu, Table, ValueRenderers } from '../../src/components/index';
+import data from '../data/table.json';
 
 export default {
   title: 'Components / DropdownMenu',
@@ -187,3 +188,75 @@ export function Complex() {
     </Menu>
   );
 }
+export function TableWithHeaderDropDownMenu() {
+  const options = useMemo<MenuOptions<string>>(() => {
+    return [
+      { label: 'Back', type: 'option', icon: <FaAddressBook /> },
+      {
+        label: 'Forward',
+        type: 'option',
+        disabled: true,
+        icon: <FaAccessibleIcon />,
+      },
+      { label: 'Refresh', type: 'option', icon: <Fa500Px /> },
+      { type: 'divider' },
+      { label: 'Save as', type: 'option', icon: <FaAccusoft /> },
+      { label: 'Print', type: 'option', icon: <FaAcquisitionsIncorporated /> },
+      { label: 'Cast media to device', type: 'option', icon: <FaAd /> },
+      { type: 'divider' },
+      {
+        label: 'Send page to your devices',
+        type: 'option',
+        icon: <FaAddressCard />,
+      },
+      {
+        label: 'Create QR Code for this page',
+        type: 'option',
+        icon: <FaAdjust />,
+      },
+    ];
+  }, []);
+
+
+
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <ColumnWithDropdownMenu value="id" options={options} />
+          <ColumnWithDropdownMenu value="name" options={options} />
+          <ColumnWithDropdownMenu value="rn" options={options} />
+          <ColumnWithDropdownMenu value="mw" options={options} />
+          <ColumnWithDropdownMenu value="em" options={options} />
+          <ColumnWithDropdownMenu value="isExpensive" options={options} />
+          <ColumnWithDropdownMenu value="color" options={options} />
+        </tr>
+      </thead>
+      <tbody>
+        {data.slice(0, 2).map(({ id, name, rn, mw, em, isExpensive, color }) => (
+          <Table.Row key={id} >
+            <ValueRenderers.Text value={id} />
+            <ValueRenderers.Text value={name} />
+            <ValueRenderers.Text value={rn} />
+            <ValueRenderers.Number value={mw} fixed={2} />
+            <ValueRenderers.Number value={em} fixed={4} />
+            <ValueRenderers.Boolean value={isExpensive} />
+            <ValueRenderers.Color value={color} />
+          </Table.Row>
+        ))}
+      </tbody>
+    </table>
+
+  );
+}
+
+function ColumnWithDropdownMenu({ value, options }: { value: string, options: MenuOptions<string> }) {
+  return <td>
+    <DropdownMenu trigger='contextMenu' onSelect={noop} options={options}>
+      <div>
+        {value}
+      </div>
+    </DropdownMenu>
+  </td>
+}