From ba8b178c1373397bd753de98ed2cce13b31ac6ed Mon Sep 17 00:00:00 2001
From: hamed-musallam <hamed.musallam@gmail.com>
Date: Wed, 18 Jan 2023 17:11:58 +0100
Subject: [PATCH] stories: add table with context menu in the header

---
 stories/components/dropdown.stories.tsx | 83 ++++++++++++++++++++++++-
 1 file changed, 82 insertions(+), 1 deletion(-)

diff --git a/stories/components/dropdown.stories.tsx b/stories/components/dropdown.stories.tsx
index e711bf68..fe352808 100644
--- a/stories/components/dropdown.stories.tsx
+++ b/stories/components/dropdown.stories.tsx
@@ -17,7 +17,12 @@ 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 +192,79 @@ 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>
+  );
+}