diff --git a/next-docs/pages/components/table.tsx b/next-docs/pages/components/table.tsx
index 2beb037fd5..8f5b473577 100644
--- a/next-docs/pages/components/table.tsx
+++ b/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'}
/>
}
code={examples ? examples.Tooltips : 'Loading'}
/>
+ }
+ code={examples ? examples.CustomColumnWidths : 'Loading'}
+ />
{
+ 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 = () => (
+
+
+ }
+ />
+
+
+ Round details
+
+
+
+ );
+
+ const makeData = (length: number) => {
+ return Array.from('_'.repeat(length)).map((_, index) => {
+ return {
+ uuid: '84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546',
+ user: 'aleksandr@heathmonitoring.com',
+ processTime: '2023-09-19T14:31:46.105Z',
+ client: 'Bender (old) Coingaming',
+ gameNameAndProvider: 'Pragmatic Play',
+ amount: 22.97,
+ currency: USD,
+ status: SUCCESS,
+ kind: BET,
+ 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 (
+
+ );
+};
+
+export default Example;
diff --git a/next-docs/public/examples/table/LongData.tsx b/next-docs/public/examples/table/LongData.tsx
index 3a73634dbe..60a5ea9d6a 100644
--- a/next-docs/public/examples/table/LongData.tsx
+++ b/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: USD,
+ status: SUCCESS,
};
});
};
@@ -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,
}),
[]
);
diff --git a/next-docs/public/examples/table/Tooltips.tsx b/next-docs/public/examples/table/Tooltips.tsx
index 92b066c226..5af719ec8b 100644
--- a/next-docs/public/examples/table/Tooltips.tsx
+++ b/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 = () => (
-
+
}
+ iconOnly={}
/>
@@ -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: USD,
+ status: SUCCESS,
actions: tooltip(),
};
});
@@ -112,6 +108,7 @@ const Example = () => {
() => ({
minWidth: 10,
width: 150,
+ maxWidth: Number.MAX_SAFE_INTEGER,
}),
[]
);
diff --git a/next-docs/public/examples/table/__tests__/__snapshots__/index.test.tsx.snap b/next-docs/public/examples/table/__tests__/__snapshots__/index.test.tsx.snap
index 2f06101771..f74d1f0d51 100644
--- a/next-docs/public/examples/table/__tests__/__snapshots__/index.test.tsx.snap
+++ b/next-docs/public/examples/table/__tests__/__snapshots__/index.test.tsx.snap
@@ -17144,7 +17144,7 @@ Object {
}
`;
-exports[`Table in RTL renders CustomContent 1`] = `
+exports[`Table in RTL renders CustomColumnWidths 1`] = `
Object {
"asFragment": [Function],
"baseElement":
@@ -17155,7 +17155,7 @@ Object {
-
- ,
- "container":
-
-
- Age
+ class="relative box-border justify-between items-center text-start break-all truncate text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+ data-sticky-td="true"
+ role="cell"
+ style="box-sizing: border-box; flex: 250 0 auto; min-width: 30px; width: 250px; position: sticky; z-index: 3; left: 0px;"
+ >
+ 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+
+
+ aleksandr@heathmonitoring.com
+
+
+ 2023-09-19T14:31:46.105Z
+
+
+ Bender (old) Coingaming
+
+
+ Pragmatic Play
+
+
+ 22.97
+
+
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+ 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+
+
+ aleksandr@heathmonitoring.com
+
+
+ 2023-09-19T14:31:46.105Z
+
+
+ Bender (old) Coingaming
+
+
+ Pragmatic Play
+
+
+ 22.97
+
+
+
+
-
-
- 👉
-
-
-
- Test
-
+
+
+
+
+
+
+
+ 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+
+
+ aleksandr@heathmonitoring.com
+
+
+ 2023-09-19T14:31:46.105Z
+
+
+ Bender (old) Coingaming
+
+
+ Pragmatic Play
+
+
+ 22.97
+
+
+
+
-
-
- 👉
-
-
-
- Test
-
+
+
+
+
+
+
+
+ 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+
+
+ aleksandr@heathmonitoring.com
+
+
+ 2023-09-19T14:31:46.105Z
+
+
+ Bender (old) Coingaming
+
+
+ Pragmatic Play
+
+
+ 22.97
+
+
+
+
-
-
- 👉
-
-
-
- Test
-
+
+
+
+
+
+
+
+ 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+
+
+ aleksandr@heathmonitoring.com
+
+
+ 2023-09-19T14:31:46.105Z
+
+
+ Bender (old) Coingaming
+
+
+ Pragmatic Play
+
+
+ 22.97
+
+
+
+
-
-
- 👉
-
-
-
- Test
-
+
+
+
+
+
+
+
+ 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+
+
+ aleksandr@heathmonitoring.com
+
+
+ 2023-09-19T14:31:46.105Z
+
+
+ Bender (old) Coingaming
+
+
+ Pragmatic Play
+
+
+ 22.97
+
+
+
+
-
-
- 👉
-
-
-
- Test
-
+
+
+
+
+
+
+
+ 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+
+
+ aleksandr@heathmonitoring.com
+
+
+ 2023-09-19T14:31:46.105Z
+
+
+ Bender (old) Coingaming
+
+
+ Pragmatic Play
+
+
+ 22.97
+
+
+
+
-
-
- 👉
-
-
-
- Test
-
+
+
+
+
+
+
+
+ 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+
+
+ aleksandr@heathmonitoring.com
+
+
+ 2023-09-19T14:31:46.105Z
+
+
+ Bender (old) Coingaming
+
+
+ Pragmatic Play
+
+
+ 22.97
+
+
+
+
-
-
- 👉
-
-
-
- Test
-
+
+
+
+
+
+
+
+ 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+
+
+ aleksandr@heathmonitoring.com
+
+
+ 2023-09-19T14:31:46.105Z
+
+
+ Bender (old) Coingaming
+
+
+ Pragmatic Play
+
+
+ 22.97
+
+
+
+
-
-
- 👉
-
-
-
- Test
-
+
+
+
+
+
+
+
+ 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+
+
+ aleksandr@heathmonitoring.com
+
+
+ 2023-09-19T14:31:46.105Z
+
+
+ Bender (old) Coingaming
+
+
+ Pragmatic Play
+
+
+ 22.97
+
+
+
+
-
-
- 👉
-
-
-
- Test
-
+
+
+
+
+
+
+
+ 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+
+
+ aleksandr@heathmonitoring.com
+
+
+ 2023-09-19T14:31:46.105Z
+
+
+ Bender (old) Coingaming
+
+
+ Pragmatic Play
+
+
+ 22.97
+
+
+
+
-
-
- 👉
-
-
-
- Test
-
+
+
+
+
+
+
+
+ 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
+
+
+ aleksandr@heathmonitoring.com
+
+
+ 2023-09-19T14:31:46.105Z
+
+
+ Bender (old) Coingaming
+
+
+ Pragmatic Play
+
+
+ 22.97
+
+
+
+
-
-
- 👉
-
-
-
- Test
-
-
-
- 390
-
-
-
-
- 1300
-
-
-
- 1300
-
-
-
-
-
- 👉
-
-
-
- Test
-
-
-
- 420
-
-
-
-
- 1400
-
-
-
- 1400
-
+
+
+
+
+
-
-
- 👉
-
-
-
- Test
-
-
-
- 450
-
-
-
-
- 1500
-
-
-
- 1500
-
+ 84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546
-
-
- 👉
-
-
-
- Test
-
-
-
- 480
-
-
-
-
- 1600
-
-
-
- 1600
-
+ aleksandr@heathmonitoring.com
-
-
- 👉
-
-
-
- Test
-
-
-
- 510
-
-
-
-
- 1700
-
-
-
- 1700
-
+ 2023-09-19T14:31:46.105Z
-
-
- 👉
-
-
-
- Test
-
-
-
- 540
-
-
-
-
- 1800
-
-
-
- 1800
-
+ Bender (old) Coingaming
-
-
- 👉
-
-
-
- Test
-
-
-
- 570
-
-
-
-
- 1900
-
-
-
- 1900
-
+ Pragmatic Play
-
-
-
-
-
-
@@ -23064,6 +26762,7 @@ Object {
-
-
-
-
@@ -30392,7 +31790,6 @@ Object {
+
+
+
-
@@ -41791,506 +46564,1440 @@ Object {
dir="rtl"
>
-
-
-
-
- Visits
+ class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+ data-sticky-td="true"
+ role="cell"
+ style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+ >
+ Test
+
+
+ Test
+
+
+
+ 390
+
+
+
+
+ 1300
+
+
+
+ 1300
+
+
+
+ 1300
+
+
- Activity
+ class="relative box-border justify-between items-center text-start text-moon-14 px-3 py-2 rounded-s-lg text-bulma bg-goku border-goku"
+ data-sticky-td="true"
+ role="cell"
+ style="box-sizing: border-box; flex: 150 0 auto; min-width: 100px; width: 150px; position: sticky; z-index: 3; left: 0px;"
+ >
+ Test
+
+
+ Test
+
+
+
+ 420
+
+
+
+
+ 1400
+
+
+
+ 1400
+
+
+
+ 1400
+
+
-
-
-
-
+
+
- Test
-
+ class="absolute w-0 h-0 overflow-hidden rounded-moon-s-sm border-2"
+ />
- Test
-
+ class="h-full w-2 bg-gohan rounded-moon-s-sm"
+ />
-
- 30
-
-
+ class="h-full w-2 bg-gohan rounded-moon-s-sm"
+ />
-
- 100
-
-
+ class="h-full w-2 bg-gohan rounded-moon-s-sm"
+ />
- 100
-
+ class="h-full w-2 bg-gohan rounded-moon-s-sm"
+ />
- 100
-
+ class="h-full w-2 bg-gohan rounded-moon-s-sm"
+ />
+
+
+
+