{
const columnsInitial = [
{
- 'Header': 'Transactions',
- 'sticky': 'left',
+ Header: 'Transactions',
+ sticky: 'left',
columns: [
{
- 'Header': 'Transaction UUID',
- 'accessor': 'uuid',
- 'Footer': '',
+ Header: 'Transaction UUID',
+ accessor: 'uuid',
+ Footer: '',
},
{
- 'Header': 'User & Supplier user',
- 'accessor': 'user',
- 'Footer': '',
+ Header: 'User & Supplier user',
+ accessor: 'user',
+ Footer: '',
},
],
},
{
- 'Header': 'Info',
- 'columns': [
+ Header: 'Info',
+ columns: [
{
- 'Header': 'Process time',
- 'accessor': 'processTime',
- 'Footer': '',
+ Header: 'Process time',
+ accessor: 'processTime',
+ Footer: '',
},
{
- 'Header': 'Client',
- 'accessor': 'client',
- 'Footer': '',
+ Header: 'Client',
+ accessor: 'client',
+ Footer: '',
},
{
- 'Header': 'Game name & provider',
- 'accessor': 'gameNameAndProvider',
- 'Footer': '',
+ Header: 'Game name & provider',
+ accessor: 'gameNameAndProvider',
+ Footer: '',
},
{
- 'Header': 'Amount',
- 'accessor': 'amount',
- 'maxWidth': 100,
- 'Footer': '',
+ Header: 'Amount',
+ accessor: 'amount',
+ maxWidth: 100,
+ Footer: '',
},
{
- 'Header': 'Currency',
- 'accessor': 'currency',
- 'maxWidth': 100,
- 'Footer': '',
+ Header: 'Currency',
+ accessor: 'currency',
+ maxWidth: 100,
+ Footer: '',
},
{
- 'Header': 'Status',
- 'accessor': 'status',
- 'maxWidth': 200,
- 'Footer': '',
+ Header: 'Status',
+ accessor: 'status',
+ maxWidth: 200,
+ Footer: '',
},
],
},
{
- 'Header': 'Actions',
- 'sticky': 'right',
- 'columns': [
+ Header: 'Actions',
+ sticky: 'right',
+ columns: [
{
- 'Header': 'Actions',
- 'accessor': 'actions',
- 'Footer': '',
+ Header: 'Actions',
+ accessor: 'actions',
+ Footer: '',
},
- ]
- }
+ ],
+ },
];
- const tooltip = (className: string) => {
- return (
-
-
-
-
-
-
-
- Round details
-
-
-
- );
- };
+ const tooltip = () => (
+
+
+ }
+ />
+
+
+ Round details
+
+
+
+ );
const makeData = (length: number) => {
return Array.from('_'.repeat(length)).map((_, index) => {
@@ -111,7 +103,7 @@ const Example = () => {
/**
* The expression below sets a tooltip with transparent background in the second row only.
*/
- actions: index === 1 ? tooltip('bg-transparent') : tooltip('bg-goku'),
+ actions: tooltip(),
};
});
};
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 d6b07bc8fc..2f06101771 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
@@ -23,7 +23,7 @@ Object {
style="display: flex; flex: 1 0 auto; min-width: 600px;"
>