@hyphen/hyphen-components 2.9.0

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,884 @@
+import type { Meta } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+import { Table } from './Table';
+import { Button } from '../Button/Button';
+import { Badge } from '../Badge/Badge';
+import type { Column as ColumnType } from '../../types';
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Table',
+  component: Table,
+};
+
+export default meta;
+
+export const Column = () =>
+  (() => {
+    const codePreviewStyle = {
+      padding: '3px 5px',
+      borderRadius: '3px',
+      border: '1px solid #EEEEEE',
+      color: 'rgba(51,51,51,0.9)',
+      backgroundColor: '#F8F8F8',
+    };
+    const columnInterfaceRows = [
+      {
+        name: 'align',
+        type: 'left | right | center',
+        description:
+          'Text alignment for column cells (including header alignment). Cells will default to left if not defined.',
+      },
+      {
+        name: 'cellClassName',
+        type: 'string | (function: (cell, row, rowIndex) => string)',
+        description: 'A CSS class to be applied to all cells in the column',
+      },
+      {
+        name: 'dataKey',
+        type: 'string',
+        description: 'The key in the rows object that matches this column',
+      },
+      {
+        name: 'emptyCellPlaceholder',
+        type: 'string | number | undefined',
+        description: 'placeholder for empty cells',
+      },
+      {
+        name: 'heading',
+        type: 'string',
+        description: 'The heading text to be displayed',
+      },
+      {
+        name: 'headerClassName',
+        type: 'string',
+        description: 'The CSS class to be applied to the column header cell.',
+      },
+      {
+        name: 'isSortable',
+        type: 'boolean',
+        description:
+          'Whether the column is sortable. Controls displaying the sort arrows and making the column header clickable',
+      },
+      {
+        name: 'key',
+        type: 'React.Key',
+        description:
+          'a custom key to be passed to each column. This gets autogenerated if not supplued',
+      },
+      {
+        name: 'render',
+        type: 'function: (cell, row, rowIndex) => ReactNode',
+        description:
+          'Render any custom content based on the cell and row content',
+      },
+      {
+        name: 'sticky',
+        type: "enum: 'left', 'right', ",
+        description:
+          'Whether the column will stick to the left or right side of the table when the table is larger than its parent',
+      },
+      {
+        name: 'truncateOverflow',
+        type: 'boolean',
+        description:
+          'Whether the column content will get truncated (with ellipsis) if it surpasses the fixed-width',
+      },
+      {
+        name: 'width',
+        type: 'number',
+        description: 'Specify the width of a particular column.',
+      },
+    ];
+    const columnConfig = [
+      { heading: 'Name', dataKey: 'name' },
+      {
+        heading: 'Type',
+        dataKey: 'type',
+        render: (cell: any) => <code style={codePreviewStyle}>{cell}</code>,
+      },
+      { heading: 'Description', dataKey: 'description' },
+    ];
+    return (
+      <Table rowKey="name" columns={columnConfig} rows={columnInterfaceRows} />
+    );
+  })();
+
+export const CommonExample = () =>
+  (() => {
+    const columnConfig = [
+      {
+        heading: 'Customer',
+        dataKey: 'customerInfo',
+        render: (_cell: any, row: any) => (
+          <div>
+            <div>{row.name}</div>
+            <div className="font-color-base">{row.email}</div>
+          </div>
+        ),
+      },
+      { heading: 'phone', dataKey: 'phone', width: 125 },
+      { heading: 'plan', dataKey: 'plan', width: 125 },
+      { heading: 'status', dataKey: 'status', width: 125 },
+    ];
+    const tableData = [
+      {
+        status: 'lead captured',
+        name: 'John Smith',
+        email: 'john@hyphen.ai',
+        phone: '555 555-5555',
+        plan: 'standard',
+      },
+      {
+        status: 'proposal in progress',
+        name: 'Jill Sanchez',
+        email: 'jill@hyphen.ai',
+        phone: '555 555-5555',
+        plan: 'premium',
+      },
+      {
+        status: 'PTO',
+        name: 'Jin Lee',
+        email: 'jin@hyphen.ai',
+        phone: '555 555-5555',
+        plan: 'standard',
+      },
+    ];
+    return <Table rowKey="id" columns={columnConfig} rows={tableData} />;
+  })();
+
+export const Loading = () =>
+  (() => {
+    const columnConfig = [
+      { heading: 'ID', dataKey: 'id' },
+      { heading: 'Color', dataKey: 'color' },
+      { heading: 'Flavor', dataKey: 'flavor' },
+    ];
+    const tableData = [
+      { id: 1, color: 'red', flavor: 'vanilla' },
+      { id: 2, color: 'blue', flavor: 'chocolate' },
+      { id: 3, color: 'green', flavor: 'strawberry' },
+    ];
+    return (
+      <Table rowKey="id" columns={columnConfig} rows={tableData} isLoading />
+    );
+  })();
+
+export const Sortable = () => {
+  // @ts-ignore
+  const sortDescending = (arrOfObj, key) =>
+    [...arrOfObj].sort((a, b) => (b[key] > a[key] ? 1 : -1));
+  // @ts-ignore
+  const sortAscending = (arrOfObj, key) =>
+    [...arrOfObj].sort((a, b) => (a[key] > b[key] ? 1 : -1));
+  const getNewSortDirection = (event: any, currentSortedColumn: any) => {
+    if (
+      event.sortedKey === currentSortedColumn.dataKey &&
+      currentSortedColumn.sortDirection === 'ascending'
+    )
+      return 'descending';
+    return 'ascending';
+  };
+  const initialData = [
+    { id: 1, color: 'red', flavor: 'vanilla' },
+    { id: 2, color: 'green', flavor: 'strawberry' },
+    { id: 3, color: 'blue', flavor: 'chocolate' },
+  ];
+  const [sortedColumn, setSortedColumn] = useState<any>({});
+  const [tableData, setTableData] = useState(initialData);
+  const handleSort = (event: any) => {
+    const newSortDirection = getNewSortDirection(event, sortedColumn);
+    setSortedColumn({
+      dataKey: event.sortedKey,
+      sortDirection: newSortDirection,
+    });
+  };
+  useEffect(() => {
+    if (sortedColumn.dataKey && sortedColumn.sortDirection) {
+      const sortedData =
+        sortedColumn.sortDirection === 'ascending'
+          ? sortAscending(tableData, sortedColumn.dataKey)
+          : sortDescending(tableData, sortedColumn.dataKey);
+      setTableData(sortedData);
+    }
+  }, [sortedColumn, tableData]);
+  const columnConfig = [
+    { heading: 'ID', dataKey: 'id', isSortable: true },
+    { heading: 'Color', dataKey: 'color', isSortable: true },
+    { heading: 'Flavor', dataKey: 'flavor', isSortable: true },
+  ];
+  return (
+    <Table
+      rowKey="id"
+      columns={columnConfig}
+      rows={tableData}
+      sortedColumn={sortedColumn}
+      onSort={handleSort}
+    />
+  );
+};
+
+export const SortablewithDefaultSortedColumn = () => {
+  // @ts-ignore
+  const sortDescending = (arrOfObj, key) =>
+    [...arrOfObj].sort((a, b) => (b[key] > a[key] ? 1 : -1));
+  // @ts-ignore
+  const sortAscending = (arrOfObj, key) =>
+    [...arrOfObj].sort((a, b) => (a[key] > b[key] ? 1 : -1));
+  const getNewSortDirection = (event: any, currentSortedColumn: any) => {
+    if (
+      event.sortedKey === currentSortedColumn.dataKey &&
+      currentSortedColumn.sortDirection === 'ascending'
+    )
+      return 'descending';
+    return 'ascending';
+  };
+  const initialData = [
+    { id: 1, color: 'red', flavor: 'vanilla' },
+    { id: 2, color: 'green', flavor: 'strawberry' },
+    { id: 3, color: 'blue', flavor: 'chocolate' },
+  ];
+  const [sortedColumn, setSortedColumn] = useState<any>({
+    dataKey: 'color',
+    sortDirection: 'descending',
+  });
+  const [tableData, setTableData] = useState([
+    ...(sortedColumn.sortDirecton === 'ascending'
+      ? sortAscending(initialData, sortedColumn.dataKey)
+      : sortDescending(initialData, sortedColumn.dataKey)),
+  ]);
+  const handleSort = (event: any) => {
+    const newSortDirection = getNewSortDirection(event, sortedColumn);
+    setSortedColumn({
+      dataKey: event.sortedKey,
+      sortDirection: newSortDirection,
+    });
+  };
+  useEffect(() => {
+    if (sortedColumn.dataKey && sortedColumn.sortDirection) {
+      const sortedData =
+        sortedColumn.sortDirection === 'ascending'
+          ? sortAscending(tableData, sortedColumn.dataKey)
+          : sortDescending(tableData, sortedColumn.dataKey);
+      setTableData(sortedData);
+    }
+  }, [sortedColumn, tableData]);
+  const columnConfig = [
+    { heading: 'ID', dataKey: 'id', isSortable: true },
+    { heading: 'Color', dataKey: 'color', isSortable: true },
+    { heading: 'Flavor', dataKey: 'flavor', isSortable: true },
+  ];
+  return (
+    <Table
+      rowKey="id"
+      columns={columnConfig}
+      rows={tableData}
+      sortedColumn={sortedColumn}
+      onSort={handleSort}
+    />
+  );
+};
+
+export const SortableAndLoading = () => {
+  // @ts-ignore
+  const sortDescending = (arrOfObj, key) =>
+    [...arrOfObj].sort((a, b) => (b[key] > a[key] ? 1 : -1));
+  // @ts-ignore
+  const sortAscending = (arrOfObj, key) =>
+    [...arrOfObj].sort((a, b) => (a[key] > b[key] ? 1 : -1));
+  const getNewSortDirection = (event: any, currentSortedColumn: any) => {
+    if (
+      event.sortedKey === currentSortedColumn.dataKey &&
+      currentSortedColumn.sortDirection === 'ascending'
+    )
+      return 'descending';
+    return 'ascending';
+  };
+  const initialData = [
+    { id: 1, color: 'red', flavor: 'vanilla' },
+    { id: 2, color: 'green', flavor: 'strawberry' },
+    { id: 3, color: 'blue', flavor: 'chocolate' },
+  ];
+  const [sortedColumn, setSortedColumn] = useState<any>({});
+  const [tableData, setTableData] = useState(initialData);
+  const handleSort = (event: any) => {
+    const newSortDirection = getNewSortDirection(event, sortedColumn);
+    setSortedColumn({
+      dataKey: event.sortedKey,
+      sortDirection: newSortDirection,
+    });
+  };
+  useEffect(() => {
+    if (sortedColumn.dataKey && sortedColumn.sortDirection) {
+      const sortedData =
+        sortedColumn.sortDirection === 'ascending'
+          ? sortAscending(tableData, sortedColumn.dataKey)
+          : sortDescending(tableData, sortedColumn.dataKey);
+      setTableData(sortedData);
+    }
+  }, [sortedColumn, tableData]);
+  const columnConfig = [
+    { heading: 'ID', dataKey: 'id', isSortable: true },
+    { heading: 'Color', dataKey: 'color', isSortable: true },
+    { heading: 'Flavor', dataKey: 'flavor', isSortable: true },
+  ];
+  return (
+    <Table
+      rowKey="id"
+      columns={columnConfig}
+      rows={tableData}
+      sortedColumn={sortedColumn}
+      onSort={handleSort}
+      isLoading
+    />
+  );
+};
+
+export const Scrollable = () =>
+  (() => {
+    const containerStyle = {
+      padding: '3px 5px',
+      borderRadius: '3px',
+      border: '1px solid #EEEEEE',
+      width: '300px',
+      height: '300px',
+    };
+    const columnConfig = [
+      { heading: 'ID', dataKey: 'id' },
+      { heading: 'Color', dataKey: 'color', width: 300 },
+      { heading: 'Flavor', dataKey: 'flavor' },
+      { heading: 'Brightness', dataKey: 'brightness' },
+    ];
+    const tableData = [
+      { id: 1, color: 'red', flavor: 'vanilla', brightness: 'light' },
+      { id: 2, color: 'blue', flavor: 'chocolate', brightness: 'medium' },
+      { id: 3, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 4, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 5, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 6, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 7, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+    ];
+    return (
+      <div style={containerStyle}>
+        <Table
+          rowKey="id"
+          columns={columnConfig}
+          rows={tableData}
+          isScrollable={{ x: true, y: true }}
+        />
+      </div>
+    );
+  })();
+
+export const ScrollablewithStickyHeader = () =>
+  (() => {
+    const containerStyle = {
+      borderRadius: '3px',
+      border: '1px solid #EEEEEE',
+      width: '300px',
+      height: '300px',
+    };
+    const columnConfig = [
+      { heading: 'ID', dataKey: 'id' },
+      { heading: 'Color', dataKey: 'color', width: 300 },
+      { heading: 'Flavor', dataKey: 'flavor', width: 100 },
+      { heading: 'Brightness', dataKey: 'brightness', width: 150 },
+    ];
+    const tableData = [
+      { id: 1, color: 'red', flavor: 'vanilla', brightness: 'light' },
+      { id: 2, color: 'blue', flavor: 'chocolate', brightness: 'medium' },
+      { id: 3, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 4, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 5, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 6, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 7, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+    ];
+    return (
+      <div style={containerStyle}>
+        <Table
+          rowKey="id"
+          columns={columnConfig}
+          rows={tableData}
+          isScrollable={{ x: true, y: true }}
+          hasStickyHeader
+        />
+      </div>
+    );
+  })();
+
+export const ScrollablewithFirstColumnStuckToLeft = () =>
+  (() => {
+    const containerStyle = {
+      borderRadius: '3px',
+      border: '1px solid #EEEEEE',
+      width: '300px',
+      height: '300px',
+    };
+    const columnConfig: ColumnType[] = [
+      { heading: 'ID', dataKey: 'id', sticky: 'left' },
+      { heading: 'Color', dataKey: 'color', width: 300 },
+      { heading: 'Flavor', dataKey: 'flavor', width: 100 },
+      { heading: 'Brightness', dataKey: 'brightness', width: 150 },
+    ];
+    const tableData = [
+      { id: 1, color: 'red', flavor: 'vanilla', brightness: 'light' },
+      { id: 2, color: 'blue', flavor: 'chocolate', brightness: 'medium' },
+      { id: 3, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 4, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 5, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 6, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 7, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+    ];
+    return (
+      <div style={containerStyle}>
+        <Table
+          rowKey="id"
+          columns={columnConfig}
+          rows={tableData}
+          isScrollable={{ x: true, y: true }}
+        />
+      </div>
+    );
+  })();
+
+export const ScrollablewithStickyHeaderAndNthColumnStuckToLeft = () =>
+  (() => {
+    const containerStyle = {
+      borderRadius: '3px',
+      border: '1px solid #EEEEEE',
+      width: '300px',
+      height: '300px',
+    };
+    const columnConfig: ColumnType[] = [
+      { heading: 'ID', dataKey: 'id' },
+      { heading: 'Color', dataKey: 'color', width: 50, sticky: 'left' },
+      { heading: 'Flavor', dataKey: 'flavor', width: 100 },
+      { heading: 'Brightness', dataKey: 'brightness', width: 400 },
+    ];
+    const tableData = [
+      { id: 1, color: 'red', flavor: 'vanilla', brightness: 'light' },
+      { id: 2, color: 'blue', flavor: 'chocolate', brightness: 'medium' },
+      { id: 3, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 4, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 5, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 6, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 7, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+    ];
+    return (
+      <div style={containerStyle}>
+        <Table
+          rowKey="id"
+          columns={columnConfig}
+          rows={tableData}
+          isScrollable={{ x: true, y: true }}
+          hasStickyHeader
+        />
+      </div>
+    );
+  })();
+
+export const ScrollableWithLastColumnStuckToRight = () =>
+  (() => {
+    const containerStyle = {
+      borderRadius: '3px',
+      border: '1px solid #EEEEEE',
+      width: '300px',
+      height: '300px',
+    };
+    const columnConfig: ColumnType[] = [
+      { heading: 'ID', dataKey: 'id' },
+      { heading: 'Color', dataKey: 'color', width: 300 },
+      { heading: 'Flavor', dataKey: 'flavor', width: 100 },
+      {
+        heading: 'Brightness',
+        dataKey: 'brightness',
+        width: 150,
+        sticky: 'right',
+      },
+    ];
+    const tableData = [
+      { id: 1, color: 'red', flavor: 'vanilla', brightness: 'light' },
+      { id: 2, color: 'blue', flavor: 'chocolate', brightness: 'medium' },
+      { id: 3, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 4, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 5, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 6, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 7, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+    ];
+    return (
+      <div style={containerStyle}>
+        <Table
+          rowKey="id"
+          columns={columnConfig}
+          rows={tableData}
+          isScrollable={{ x: true, y: true }}
+        />
+      </div>
+    );
+  })();
+
+export const ScrollableWithStickyHeaderAndFirstColumnStuckToLeft = () =>
+  (() => {
+    const containerStyle = {
+      borderRadius: '3px',
+      border: '1px solid #EEEEEE',
+      width: '300px',
+      height: '300px',
+    };
+    const columnConfig: ColumnType[] = [
+      { heading: 'ID', dataKey: 'id', sticky: 'left' },
+      { heading: 'Color', dataKey: 'color', width: 300 },
+      { heading: 'Flavor', dataKey: 'flavor', width: 100 },
+      { heading: 'Brightness', dataKey: 'brightness', width: 150 },
+    ];
+    const tableData = [
+      { id: 1, color: 'red', flavor: 'vanilla', brightness: 'light' },
+      { id: 2, color: 'blue', flavor: 'chocolate', brightness: 'medium' },
+      { id: 3, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 4, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 5, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 6, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 7, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+    ];
+    return (
+      <div style={containerStyle}>
+        <Table
+          rowKey="id"
+          columns={columnConfig}
+          rows={tableData}
+          isScrollable={{ x: true, y: true }}
+          hasStickyHeader
+          hoverableRows
+          isStriped
+        />
+      </div>
+    );
+  })();
+
+export const ScrollableAndLoading = () =>
+  (() => {
+    const containerStyle = {
+      padding: '3px 5px',
+      borderRadius: '3px',
+      border: '1px solid #EEEEEE',
+      width: '300px',
+      height: '300px',
+    };
+    const columnConfig: ColumnType[] = [
+      { heading: 'ID', dataKey: 'id' },
+      { heading: 'Color', dataKey: 'color', width: 300 },
+      { heading: 'Flavor', dataKey: 'flavor' },
+      { heading: 'Brightness', dataKey: 'brightness' },
+    ];
+    const tableData = [
+      { id: 1, color: 'red', flavor: 'vanilla', brightness: 'light' },
+      { id: 2, color: 'blue', flavor: 'chocolate', brightness: 'medium' },
+      { id: 3, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 4, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 5, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 6, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+      { id: 7, color: 'green', flavor: 'strawberry', brightness: 'dark' },
+    ];
+    return (
+      <div style={containerStyle}>
+        <Table
+          rowKey="id"
+          columns={columnConfig}
+          rows={tableData}
+          isScrollable={{ x: true, y: true }}
+          isLoading
+        />
+      </div>
+    );
+  })();
+
+export const FixedWidthColumns = () =>
+  (() => {
+    const columnConfig: ColumnType[] = [
+      { heading: 'ID', dataKey: 'id', width: 150 },
+      { heading: 'Color', dataKey: 'color' },
+      { heading: 'Flavor', dataKey: 'flavor' },
+    ];
+    const tableData = [
+      { id: 1, color: 'red', flavor: 'vanilla' },
+      { id: 2, color: 'blue', flavor: 'chocolate' },
+      { id: 3, color: 'green', flavor: 'strawberry' },
+    ];
+    return <Table rowKey="id" columns={columnConfig} rows={tableData} />;
+  })();
+
+export const FixedTableLayout = () =>
+  (() => {
+    const columnConfig: ColumnType[] = [
+      { heading: 'ID', dataKey: 'id', width: 150 },
+      { heading: 'Color', dataKey: 'color' },
+      { heading: 'Flavor', dataKey: 'flavor' },
+    ];
+    const tableData = [
+      { id: 1, color: 'red', flavor: 'vanilla' },
+      { id: 2, color: 'blue', flavor: 'chocolate' },
+      { id: 3, color: 'green', flavor: 'strawberry' },
+    ];
+    return (
+      <Table
+        rowKey="id"
+        columns={columnConfig}
+        rows={tableData}
+        useFixedTableLayout
+      />
+    );
+  })();
+
+export const TruncateOverflow = () =>
+  (() => {
+    const columnConfig: ColumnType[] = [
+      { heading: 'ID', dataKey: 'id' },
+      { heading: 'Color', dataKey: 'color', width: 100 },
+      { heading: 'Flavor', dataKey: 'flavor' },
+    ];
+    const tableData = [
+      { id: 1, color: 'red', flavor: 'vanilla' },
+      { id: 2, color: 'blue longy long long long', flavor: 'chocolate' },
+      { id: 3, color: 'green', flavor: 'strawberry' },
+    ];
+    return (
+      <Table
+        rowKey="id"
+        columns={columnConfig}
+        rows={tableData}
+        truncateOverflow
+      />
+    );
+  })();
+
+export const CustomActions = () =>
+  (() => {
+    const renderFlavor = (cell: any, row: any, index: number) => {
+      const rows = [{ href: cell.href, name: cell.name, id: row.id, index }];
+      const columns = [
+        {
+          heading: 'Url',
+          dataKey: 'href',
+          render: (cell: any) => <a href={cell}>{cell}</a>,
+        },
+        { heading: 'Name', dataKey: 'name' },
+        { heading: 'ID', dataKey: 'id' },
+        { heading: 'Index', dataKey: 'index' },
+      ];
+      return <Table columns={columns} rows={rows} rowKey="id" isCompact />;
+    };
+    const columnConfig: ColumnType[] = [
+      { heading: 'ID', dataKey: 'id' },
+      { heading: 'Color', dataKey: 'color' },
+      {
+        heading: 'Based on the cell/row',
+        dataKey: 'flavor',
+        // @ts-ignore
+        render: renderFlavor,
+      },
+      { heading: 'Any custom JSX', render: () => <Button>Do anything</Button> },
+    ];
+    const tableData = [
+      {
+        id: 1,
+        color: 'red',
+        flavor: { name: 'vanilla', href: 'www.vanilla.com' },
+      },
+      {
+        id: 2,
+        color: 'blue',
+        flavor: { name: 'chocolate', href: 'www.chocolate.com' },
+      },
+      {
+        id: 3,
+        color: 'green',
+        flavor: { name: 'strawberry', href: 'www.strawberry.com' },
+      },
+    ];
+    return <Table rowKey="id" columns={columnConfig} rows={tableData} />;
+  })();
+
+export const EmptyCellPlaceholder = () =>
+  (() => {
+    const columnConfig = [
+      { heading: 'ID', dataKey: 'id' },
+      { heading: 'Color', dataKey: 'color', emptyCellPlaceholder: '--' },
+      { heading: 'Flavor', dataKey: 'flavor' },
+      {
+        heading: 'Price',
+        dataKey: 'price',
+        render: (cell: any) => (cell ? `$${cell}` : null),
+        emptyCellPlaceholder: '$0.00',
+      },
+    ];
+    const tableData = [
+      { id: 1, color: 'red', flavor: 'vanilla', price: 10 },
+      { id: 2, color: '', flavor: 'chocolate', price: 12.21 },
+      { id: 3, color: 'green', flavor: 'strawberry', price: 9.24 },
+      { id: 4, color: 'blue', flavor: 'rocky road' },
+    ];
+    return <Table rowKey="id" columns={columnConfig} rows={tableData} />;
+  })();
+
+export const Borderless = () =>
+  (() => {
+    const columnConfig: ColumnType[] = [
+      { heading: 'ID', dataKey: 'id' },
+      { heading: 'Color', dataKey: 'color' },
+      { heading: 'Flavor', dataKey: 'flavor' },
+    ];
+    const tableData = [
+      { id: 1, color: 'red', flavor: 'vanilla' },
+      { id: 2, color: 'blue', flavor: 'chocolate' },
+      { id: 3, color: 'green', flavor: 'strawberry' },
+    ];
+    return (
+      <Table rowKey="id" columns={columnConfig} rows={tableData} isBorderless />
+    );
+  })();
+
+export const Compact = () =>
+  (() => {
+    const columnConfig: ColumnType[] = [
+      { heading: 'ID', dataKey: 'id' },
+      { heading: 'Color', dataKey: 'color' },
+      { heading: 'Flavor', dataKey: 'flavor' },
+    ];
+    const tableData = [
+      { id: 1, color: 'red', flavor: 'vanilla' },
+      { id: 2, color: 'blue', flavor: 'chocolate' },
+      { id: 3, color: 'green', flavor: 'strawberry' },
+    ];
+    return (
+      <Table rowKey="id" columns={columnConfig} rows={tableData} isCompact />
+    );
+  })();
+
+export const Striped = () =>
+  (() => {
+    const columnConfig: ColumnType[] = [
+      { heading: 'ID', dataKey: 'id' },
+      { heading: 'Color', dataKey: 'color' },
+      { heading: 'Flavor', dataKey: 'flavor' },
+    ];
+    const tableData = [
+      { id: 1, color: 'red', flavor: 'vanilla' },
+      { id: 2, color: 'blue', flavor: 'chocolate' },
+      { id: 3, color: 'green', flavor: 'strawberry' },
+      { id: 4, color: 'green', flavor: 'strawberry' },
+      { id: 5, color: 'green', flavor: 'strawberry' },
+      { id: 6, color: 'green', flavor: 'strawberry' },
+      { id: 7, color: 'green', flavor: 'strawberry' },
+    ];
+    return (
+      <Table rowKey="id" columns={columnConfig} rows={tableData} isStriped />
+    );
+  })();
+
+export const Hoverable = () =>
+  (() => {
+    const columnConfig: ColumnType[] = [
+      { heading: 'ID', dataKey: 'id' },
+      { heading: 'Color', dataKey: 'color' },
+      { heading: 'Flavor', dataKey: 'flavor' },
+    ];
+    const tableData = [
+      { id: 1, color: 'red', flavor: 'vanilla' },
+      { id: 2, color: 'blue', flavor: 'chocolate' },
+      { id: 3, color: 'green', flavor: 'strawberry' },
+    ];
+    return (
+      <Table
+        rowKey="id"
+        columns={columnConfig}
+        rows={tableData}
+        hoverableRows
+      />
+    );
+  })();
+
+export const StripedAndHoverable = () =>
+  (() => {
+    const columnConfig: ColumnType[] = [
+      { heading: 'ID', dataKey: 'id' },
+      { heading: 'Color', dataKey: 'color' },
+      { heading: 'Flavor', dataKey: 'flavor' },
+    ];
+    const tableData = [
+      { id: 1, color: 'red', flavor: 'vanilla' },
+      { id: 2, color: 'blue', flavor: 'chocolate' },
+      { id: 3, color: 'green', flavor: 'strawberry' },
+    ];
+    return (
+      <Table
+        rowKey="id"
+        columns={columnConfig}
+        rows={tableData}
+        hoverableRows
+        isStriped
+      />
+    );
+  })();
+
+export const AligningCellText = () =>
+  (() => {
+    const columnConfig: ColumnType[] = [
+      { heading: 'Right aligned', dataKey: 'id', align: 'right' },
+      { heading: 'Center aligned', dataKey: 'color', align: 'center' },
+      { heading: 'Left aligned (default)', dataKey: 'flavor' },
+    ];
+    const tableData = [
+      { id: 1, color: 'red', flavor: 'vanilla' },
+      { id: 2, color: 'blue', flavor: 'chocolate' },
+      { id: 3, color: 'green', flavor: 'strawberry' },
+    ];
+    return <Table rowKey="id" columns={columnConfig} rows={tableData} />;
+  })();
+
+export const GlobalAlign = () =>
+  (() => {
+    const columnConfig: ColumnType[] = [
+      {
+        heading: 'Center Aligned via Column Config',
+        dataKey: 'id',
+        align: 'center',
+      },
+      { heading: 'Globally aligned right', dataKey: 'color' },
+      { heading: 'Also globally aligned right', dataKey: 'flavor' },
+    ];
+    const tableData = [
+      { id: 1, color: 'red', flavor: 'vanilla' },
+      { id: 2, color: 'blue', flavor: 'chocolate' },
+      { id: 3, color: 'green', flavor: 'strawberry' },
+    ];
+    return (
+      <Table
+        rowKey="id"
+        columns={columnConfig}
+        rows={tableData}
+        align="right"
+      />
+    );
+  })();
+
+export const ComponentAsColumnHeader = () =>
+  (() => {
+    const columnConfig: ColumnType[] = [
+      { heading: 'ID', dataKey: 'id' },
+      { heading: 'Color', dataKey: 'color' },
+      { heading: <Badge message="Status" />, dataKey: 'status' },
+    ];
+    const tableData = [
+      {
+        id: 1,
+        color: 'red',
+        status: <Badge message="danger" variant="red" />,
+      },
+      { id: 2, color: 'blue', status: <Badge message="info" variant="blue" /> },
+      {
+        id: 3,
+        color: 'green',
+        status: <Badge message="success" variant="green" />,
+      },
+    ];
+    return <Table rowKey="id" columns={columnConfig} rows={tableData} />;
+  })();