feat: a new example of the long data table with custom column widths

next-docs/pages/components/table.tsx

@@ -8,6 +8,7 @@ import Calendar from '../../public/examples/table/Calendar';
 import CellBorder from '../../public/examples/table/CellBorder';
 import ClickableRows from '../../public/examples/table/ClickableRows';
 import CustomColors from '../../public/examples/table/CustomColors';
+import CustomColumnWidths from '../../public/examples/table/CustomColumnWidths';
 import CustomContent from '../../public/examples/table/CustomContent';
 import DeepTable from '../../public/examples/table/DeepTable';
 import Default from '../../public/examples/table/Default';
@@ -136,10 +137,15 @@ const PageTable = () => {
         code={examples ? examples.LongData : 'Loading'}
       />
       <Preview
-        title="Tooltips (with a transparent one in the second row)"
+        title="Tooltips"
         preview={<Tooltips />}
         code={examples ? examples.Tooltips : 'Loading'}
       />
+      <Preview
+        title="Long data table (with custom column widths)"
+        preview={<CustomColumnWidths />}
+        code={examples ? examples.CustomColumnWidths : 'Loading'}
+      />
       <PropsTable
         title="Table props"
         data={[

next-docs/public/examples/table/CustomColumnWidths.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import { Table } from '@heathmont/moon-table-tw';
+import ClipProps from '@heathmont/moon-table-tw/lib/private/types/ClipProps';
+import { Chip, Tag, Tooltip } from '@heathmont/moon-core-tw';
+import { OtherFrame } from '@heathmont/moon-icons-tw';
+
+const Example = () => {
+  const columnsInitial = [
+    {
+      'Header': 'Transactions',
+      'sticky': 'left',
+      columns: [
+        {
+          'Header': 'Transaction UUID',
+          'accessor': 'uuid',
+          'Footer': '',
+          'width': 250,
+        },
+        {
+          'Header': 'User & Supplier user',
+          'accessor': 'user',
+          'Footer': '',
+          'minWidth': 80,
+          'width': 240,
+        },
+      ],
+    },
+    {
+      'Header': 'Info',
+      'columns': [
+        {
+          'Header': 'Process time',
+          'accessor': 'processTime',
+          'Footer': '',
+        },
+        {
+          'Header': 'Client',
+          'accessor': 'client',
+          'Footer': '',
+        },
+        {
+          'Header': 'Game name & provider',
+          'accessor': 'gameNameAndProvider',
+          'Footer': '',
+          'width': 120,
+        },
+        {
+          'Header': 'Amount',
+          'accessor': 'amount',
+          'Footer': '',
+          'minWidth': 60,
+          'width': 70,
+        },
+        {
+          'Header': 'Currency',
+          'accessor': 'currency',
+          'Footer': '',
+          'minWidth': 75,
+          'width': 80,
+        },
+        {
+          'Header': 'Status',
+          'accessor': 'status',
+          'Footer': '',
+          'minWidth': 80,
+          'width': 90
+        },
+        {
+          'Header': 'Kind',
+          'accessor': 'kind',
+          'Footer': '',
+          'minWidth': 50,
+          'width': 60
+        },
+      ],
+    },
+    {
+      'Header': 'Actions',
+      'sticky': 'right',
+      'columns': [
+        {
+          'Header': 'Actions',
+          'accessor': 'actions',
+          'Footer': '',
+          'minWidth': 60,
+          'width': 80,
+        },
+      ],
+    },
+  ];
+
+  const tooltip = () => (
+    <Tooltip>
+      <Tooltip.Trigger className="max-h-6">
+        <Chip
+          variant="ghost"
+          iconOnly={<OtherFrame className="text-moon-24" />}
+        />
+      </Tooltip.Trigger>
+      <Tooltip.Content position="top-start">
+        Round details
+        <Tooltip.Arrow />
+      </Tooltip.Content>
+    </Tooltip>
+  );
+
+  const makeData = (length: number) => {
+    return Array.from('_'.repeat(length)).map((_, index) => {
+      return {
+        uuid: '84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546',
+        user: '[email protected]',
+        processTime: '2023-09-19T14:31:46.105Z',
+        client: 'Bender (old) Coingaming',
+        gameNameAndProvider: 'Pragmatic Play',
+        amount: 22.97,
+        currency: <Tag className="bg-gray-100 text-lg text-gray-600 max-w-fit">USD</Tag>,
+        status: <Tag className="bg-roshi-10 text-lg text-roshi max-w-fit">SUCCESS</Tag>,
+        kind: <Tag className="bg-roshi-10 text-lg text-roshi max-w-fit">BET</Tag>,
+        actions: tooltip(),
+      };
+    });
+  };
+
+  const defaultColumn = React.useMemo(
+    () => ({
+      minWidth: 30,
+      width: 150,
+      maxWidth: Number.MAX_SAFE_INTEGER,
+    }),
+    []
+  );
+
+  const columns = React.useMemo(() => columnsInitial, []);
+  const data = React.useMemo(() => makeData(40), []);
+  const textClip = 'clip' as ClipProps;
+
+  return (
+    <Table
+      columns={columns}
+      data={data}
+      defaultColumn={defaultColumn}
+      width={900}
+      height={400}
+      withFooter={false}
+      textClip={textClip}
+    />
+  );
+};
+
+export default Example;

next-docs/public/examples/table/LongData.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Table } from '@heathmont/moon-table-tw';
 import ClipProps from '@heathmont/moon-table-tw/lib/private/types/ClipProps';
+import { Tag } from '@heathmont/moon-core-tw';
 
 const Example = () => {
   const columnsInitial = [
@@ -47,6 +48,8 @@ const Example = () => {
           'Header': 'Currency',
           'accessor': 'currency',
           'Footer': '',
+          /*'maxWidth': Number.MAX_SAFE_INTEGER,
+          'width': 80 */
         },
       ],
     },
@@ -72,8 +75,8 @@ const Example = () => {
         client: 'Bender (old) Coingaming',
         gameNameAndProvider: 'Pragmatic Play',
         amount: 22.97,
-        currency: 'USD',
-        status: 'SUCCESS'
+        currency: <Tag className="bg-gray-100 text-lg text-gray-600 max-w-fit">USD</Tag>,
+        status: <Tag className="bg-roshi-10 text-lg text-roshi max-w-fit">SUCCESS</Tag>,
       };
     });
   };
@@ -82,10 +85,7 @@ const Example = () => {
     () => ({
       minWidth: 10,
       width: 150,
-
-      /* The next prop is commented to provide an opportunity
-        to expand any table column as much as possible */
-      /* maxWidth: 400, */
+      maxWidth: Number.MAX_SAFE_INTEGER,
     }),
     []
   );

next-docs/public/examples/table/Tooltips.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Table } from '@heathmont/moon-table-tw';
 import ClipProps from '@heathmont/moon-table-tw/lib/private/types/ClipProps';
-import { Chip, Tooltip } from '@heathmont/moon-core-tw';
+import { Chip, Tag, Tooltip } from '@heathmont/moon-core-tw';
 import { OtherFrame } from '@heathmont/moon-icons-tw';
 
 const Example = () => {
@@ -75,10 +75,10 @@ const Example = () => {
 
   const tooltip = () => (
     <Tooltip>
-      <Tooltip.Trigger>
+      <Tooltip.Trigger className="max-h-6">
         <Chip
           variant="ghost"
-          iconOnly={<OtherFrame className="text-moon-24" />}
+          iconOnly={<OtherFrame className="text-moon-24 max-h-6" />}
         />
       </Tooltip.Trigger>
       <Tooltip.Content position="top-start">
@@ -97,12 +97,8 @@ const Example = () => {
         client: 'Bender (old) Coingaming',
         gameNameAndProvider: 'Pragmatic Play',
         amount: 22.97,
-        currency: 'USD',
-        status: 'SUCCESS',
-
-        /**
-         * The expression below sets a tooltip with transparent background in the second row only.
-         */
+        currency: <Tag className="bg-gray-100 text-lg text-gray-600 max-w-fit">USD</Tag>,
+        status: <Tag className="bg-roshi-10 text-lg text-roshi max-w-fit">SUCCESS</Tag>,
         actions: tooltip(),
       };
     });
@@ -112,6 +108,7 @@ const Example = () => {
     () => ({
       minWidth: 10,
       width: 150,
+      maxWidth: Number.MAX_SAFE_INTEGER,
     }),
     []
   );