Table 10.14.1
ARIA
RTL
A component for displaying large amounts of data in rows and columns. Based on TanStack Table v8.
Default
First Name | Last Name | Age | Visits | Progress | Activity | Status |
|---|---|---|---|---|---|---|
| Test | Test | 0 | 0 | 0 | 0 | 0 |
| Test | Test | 30 | 100 | 100 | 100 | 100 |
| Test | Test | 60 | 200 | 200 | 200 | 200 |
| Test | Test | 90 | 300 | 300 | 300 | 300 |
| Test | Test | 120 | 400 | 400 | 400 | 400 |
"use client";
import React, { useCallback } from "react";
import Table from "@heathmont/moon-table-v8-tw/lib/es/components/Table";
import { ColumnDef } from "@tanstack/react-table";
type DefaultHelper = {
firstName: string;
lastName: string;
age: string;
visits: string;
progress: string;
status: number;
activity: number;
};
const Example = () => {
const makeData = useCallback((length: number) => {
return Array.from("_".repeat(length)).map((_, index) => {
return {
firstName: "Test",
lastName: "Test",
age: <span>{Math.floor(index * 30)}</span>,
visits: <span>{Math.floor(index * 100)}</span>,
progress: <span>{Math.floor(index * 100)}</span>,
status: Math.floor(index * 100),
activity: Math.floor(index * 100),
};
});
}, []);
const columns = React.useMemo<ColumnDef<{}, DefaultHelper>[]>(
() => [
{
id: "firstName",
header: () => "First Name",
accessorKey: "firstName",
},
{
id: "lastName",
header: () => "Last Name",
accessorKey: "lastName",
},
{
id: "age",
header: () => "Age",
accessorKey: "age",
cell: (props) => props.getValue(),
},
{
id: "visits",
header: () => "Visits",
accessorKey: "visits",
cell: (props) => props.getValue(),
},
{
id: "progress",
header: () => "Progress",
accessorKey: "progress",
cell: (props) => props.getValue(),
},
{
id: "activity",
header: () => "Activity",
accessorKey: "activity",
},
{
id: "status",
header: () => "Status",
accessorKey: "status",
},
],
[],
);
const data = React.useMemo(() => makeData(5), [makeData]);
return (
<div className="w-full max-w-screen-lg border border-beerus rounded-lg overflow-hidden">
<Table columns={columns} data={data} />
</div>
);
};
export default Example;
Different row gaps
Examples with gap values of: 0, 2px (default), 4px, 8px and 12px.
First Name | Last Name | Age | Visits | Progress | Activity | Status |
|---|---|---|---|---|---|---|
| Test | Test | 0 | 0 | 0 | 0 | 0 |
| Test | Test | 30 | 100 | 100 | 100 | 100 |
First Name | Last Name | Age | Visits | Progress | Activity | Status |
|---|---|---|---|---|---|---|
| Test | Test | 0 | 0 | 0 | 0 | 0 |
| Test | Test | 30 | 100 | 100 | 100 | 100 |
First Name | Last Name | Age | Visits | Progress | Activity | Status |
|---|---|---|---|---|---|---|
| Test | Test | 0 | 0 | 0 | 0 | 0 |
| Test | Test | 30 | 100 | 100 | 100 | 100 |
First Name | Last Name | Age | Visits | Progress | Activity | Status |
|---|---|---|---|---|---|---|
| Test | Test | 0 | 0 | 0 | 0 | 0 |
| Test | Test | 30 | 100 | 100 | 100 | 100 |
First Name | Last Name | Age | Visits | Progress | Activity | Status |
|---|---|---|---|---|---|---|
| Test | Test | 0 | 0 | 0 | 0 | 0 |
| Test | Test | 30 | 100 | 100 | 100 | 100 |
"use client";
import React, { useCallback } from "react";
import Table from "@heathmont/moon-table-v8-tw/lib/es/components/Table";
import { ColumnDef } from "@tanstack/react-table";
type DefaultHelper = {
firstName: string;
lastName: string;
age: string;
visits: string;
progress: string;
status: number;
activity: number;
};
const Example = () => {
const makeData = useCallback((length: number) => {
return Array.from("_".repeat(length)).map((_, index) => {
return {
firstName: "Test",
lastName: "Test",
age: <span>{Math.floor(index * 30)}</span>,
visits: <span>{Math.floor(index * 100)}</span>,
progress: <span>{Math.floor(index * 100)}</span>,
status: Math.floor(index * 100),
activity: Math.floor(index * 100),
};
});
}, []);
const columns = React.useMemo<ColumnDef<{}, DefaultHelper>[]>(
() => [
{
id: "firstName",
header: () => "First Name",
accessorKey: "firstName",
},
{
id: "lastName",
header: () => "Last Name",
accessorKey: "lastName",
},
{
id: "age",
header: () => "Age",
accessorKey: "age",
cell: (props) => props.getValue(),
},
{
id: "visits",
header: () => "Visits",
accessorKey: "visits",
cell: (props) => props.getValue(),
},
{
id: "progress",
header: () => "Progress",
accessorKey: "progress",
cell: (props) => props.getValue(),
},
{
id: "activity",
header: () => "Activity",
accessorKey: "activity",
},
{
id: "status",
header: () => "Status",
accessorKey: "status",
},
],
[],
);
const data = React.useMemo(() => makeData(2), [makeData]);
return (
<>
<div className="w-full max-w-screen-lg border border-beerus rounded-lg overflow-hidden">
<Table columns={columns} data={data} rowGap="0" />
</div>
<div className="w-full max-w-screen-lg border border-beerus rounded-lg overflow-hidden">
<Table columns={columns} data={data} />
</div>
<div className="w-full max-w-screen-lg border border-beerus rounded-lg overflow-hidden">
<Table columns={columns} data={data} rowGap="4px" />
</div>
<div className="w-full max-w-screen-lg border border-beerus rounded-lg overflow-hidden">
<Table columns={columns} data={data} rowGap="8px" />
</div>
<div className="w-full max-w-screen-lg border border-beerus rounded-lg overflow-hidden">
<Table columns={columns} data={data} rowGap="12px" />
</div>
</>
);
};
export default Example;
Different row sizes
First Name | Last Name | Age | Visits | Progress | Activity | Status |
|---|---|---|---|---|---|---|
| Test | Test | 0 | 0 | 0 | 0 | 0 |
| Test | Test | 30 | 100 | 100 | 100 | 100 |
First Name | Last Name | Age | Visits | Progress | Activity | Status |
|---|---|---|---|---|---|---|
| Test | Test | 0 | 0 | 0 | 0 | 0 |
| Test | Test | 30 | 100 | 100 | 100 | 100 |
First Name | Last Name | Age | Visits | Progress | Activity | Status |
|---|---|---|---|---|---|---|
| Test | Test | 0 | 0 | 0 | 0 | 0 |
| Test | Test | 30 | 100 | 100 | 100 | 100 |
First Name | Last Name | Age | Visits | Progress | Activity | Status |
|---|---|---|---|---|---|---|
| Test | Test | 0 | 0 | 0 | 0 | 0 |
| Test | Test | 30 | 100 | 100 | 100 | 100 |
First Name | Last Name | Age | Visits | Progress | Activity | Status |
|---|---|---|---|---|---|---|
| Test | Test | 0 | 0 | 0 | 0 | 0 |
| Test | Test | 30 | 100 | 100 | 100 | 100 |
First Name | Last Name | Age | Visits | Progress | Activity | Status |
|---|---|---|---|---|---|---|
| Test | Test | 0 | 0 | 0 | 0 | 0 |
| Test | Test | 30 | 100 | 100 | 100 | 100 |
"use client";
import React, { useCallback } from "react";
import Table from "@heathmont/moon-table-v8-tw/lib/es/components/Table";
import { ColumnDef } from "@tanstack/react-table";
type DefaultHelper = {
firstName: string;
lastName: string;
age: string;
visits: string;
progress: string;
status: number;
activity: number;
};
const Example = () => {
const makeData = useCallback((length: number) => {
return Array.from("_".repeat(length)).map((_, index) => {
return {
firstName: "Test",
lastName: "Test",
age: <span>{Math.floor(index * 30)}</span>,
visits: <span>{Math.floor(index * 100)}</span>,
progress: <span>{Math.floor(index * 100)}</span>,
status: Math.floor(index * 100),
activity: Math.floor(index * 100),
};
});
}, []);
const columns = React.useMemo<ColumnDef<{}, DefaultHelper>[]>(
() => [
{
id: "firstName",
header: () => "First Name",
accessorKey: "firstName",
},
{
id: "lastName",
header: () => "Last Name",
accessorKey: "lastName",
},
{
id: "age",
header: () => "Age",
accessorKey: "age",
cell: (props) => props.getValue(),
},
{
id: "visits",
header: () => "Visits",
accessorKey: "visits",
cell: (props) => props.getValue(),
},
{
id: "progress",
header: () => "Progress",
accessorKey: "progress",
cell: (props) => props.getValue(),
},
{
id: "activity",
header: () => "Activity",
accessorKey: "activity",
},
{
id: "status",
header: () => "Status",
accessorKey: "status",
},
],
[],
);
const data = React.useMemo(() => makeData(2), [makeData]);
return (
<>
<div className="w-full max-w-screen-lg border border-beerus rounded-lg overflow-hidden">
<Table columns={columns} data={data} rowSize="xs" />
</div>
<div className="w-full max-w-screen-lg border border-beerus rounded-lg overflow-hidden">
<Table columns={columns} data={data} rowSize="sm" />
</div>
<div className="w-full max-w-screen-lg border border-beerus rounded-lg overflow-hidden">
<Table columns={columns} data={data} />
</div>
<div className="w-full max-w-screen-lg border border-beerus rounded-lg overflow-hidden">
<Table columns={columns} data={data} rowSize="lg" />
</div>
<div className="w-full max-w-screen-lg border border-beerus rounded-lg overflow-hidden">
<Table columns={columns} data={data} rowSize="xl" />
</div>
<div className="w-full max-w-screen-lg border border-beerus rounded-lg overflow-hidden">
<Table columns={columns} data={data} rowSize="2xl" />
</div>
</>
);
};
export default Example;
Cell borders
First Name | Last Name | Age | Visits | Progress | Activity | Status |
|---|---|---|---|---|---|---|
| Test | Test | 0 | 0 | 0 | 0 | 0 |
| Test | Test | 30 | 100 | 100 | 100 | 100 |
| Test | Test | 60 | 200 | 200 | 200 | 200 |
| Test | Test | 90 | 300 | 300 | 300 | 300 |
| Test | Test | 120 | 400 | 400 | 400 | 400 |
"use client";
import React, { useCallback } from "react";
import Table from "@heathmont/moon-table-v8-tw/lib/es/components/Table";
import { ColumnDef } from "@tanstack/react-table";
type DefaultHelper = {
firstName: string;
lastName: string;
age: string;
visits: string;
progress: string;
status: number;
activity: number;
};
const Example = () => {
const makeData = useCallback((length: number) => {
return Array.from("_".repeat(length)).map((_, index) => {
return {
firstName: "Test",
lastName: "Test",
age: <span>{Math.floor(index * 30)}</span>,
visits: <span>{Math.floor(index * 100)}</span>,
progress: <span>{Math.floor(index * 100)}</span>,
status: Math.floor(index * 100),
activity: Math.floor(index * 100),
};
});
}, []);
const columns = React.useMemo<ColumnDef<{}, DefaultHelper>[]>(
() => [
{
id: "firstName",
header: () => "First Name",
accessorKey: "firstName",
},
{
id: "lastName",
header: () => "Last Name",
accessorKey: "lastName",
},
{
id: "age",
header: () => "Age",
accessorKey: "age",
cell: (props) => props.getValue(),
},
{
id: "visits",
header: () => "Visits",
accessorKey: "visits",
cell: (props) => props.getValue(),
},
{
id: "progress",
header: () => "Progress",
accessorKey: "progress",
cell: (props) => props.getValue(),
},
{
id: "activity",
header: () => "Activity",
accessorKey: "activity",
},
{
id: "status",
header: () => "Status",
accessorKey: "status",
},
],
[],
);
const data = React.useMemo(() => makeData(5), [makeData]);
return (
<div className="w-full max-w-screen-lg border border-beerus rounded-lg overflow-hidden">
<Table
columns={columns}
data={data}
layout="stretched-auto"
isResizable
withCellBorder
/>
</div>
);
};
export default Example;
Clickable rows
This example demonstrates the capabilities of a table with clickable rows.
Use the mouse wheel or the arrow keys on the keyboard to scroll the data up and down.
Watch the result of clicking on the rows in the browser console.
First Name | Last Name | Age | Visits | Progress | Activity | Status |
|---|---|---|---|---|---|---|
| Test | Test | 0 | 0 | 0 | 0 | 0 |
| Test | Test | 30 | 100 | 100 | 100 | 100 |
| Test | Test | 60 | 200 | 200 | 200 | 200 |
| Test | Test | 90 | 300 | 300 | 300 | 300 |
| Test | Test | 120 | 400 | 400 | 400 | 400 |
| Test | Test | 150 | 500 | 500 | 500 | 500 |
| Test | Test | 180 | 600 | 600 | 600 | 600 |
| Test | Test | 210 | 700 | 700 | 700 | 700 |
| Test | Test | 240 | 800 | 800 | 800 | 800 |
| Test | Test | 270 | 900 | 900 | 900 | 900 |
| Test | Test | 300 | 1000 | 1000 | 1000 | 1000 |
| Test | Test | 330 | 1100 | 1100 | 1100 | 1100 |
| Test | Test | 360 | 1200 | 1200 | 1200 | 1200 |
| Test | Test | 390 | 1300 | 1300 | 1300 | 1300 |
| Test | Test | 420 | 1400 | 1400 | 1400 | 1400 |
| Test | Test | 450 | 1500 | 1500 | 1500 | 1500 |
| Test | Test | 480 | 1600 | 1600 | 1600 | 1600 |
| Test | Test | 510 | 1700 | 1700 | 1700 | 1700 |
| Test | Test | 540 | 1800 | 1800 | 1800 | 1800 |
| Test | Test | 570 | 1900 | 1900 | 1900 | 1900 |
"use client";
import Table from "@heathmont/moon-table-v8-tw/lib/es/components/Table";
import { ColumnDef, Row } from "@tanstack/react-table";
import React, { useCallback } from "react";
type DataTypeHelper = {
firstName: string;
lastName: string;
age: string;
visits: string;
progress: string;
status: number;
activity: number;
};
const Example = () => {
const makeData = useCallback((length: number) => {
return Array.from("_".repeat(length)).map((_, index) => {
return {
firstName: "Test",
lastName: "Test",
age: <span>{Math.floor(index * 30)}</span>,
visits: <span>{Math.floor(index * 100)}</span>,
progress: <span>{Math.floor(index * 100)}</span>,
status: Math.floor(index * 100),
activity: Math.floor(index * 100),
};
});
}, []);
const [data, setData] = React.useState(makeData(20));
const columns = React.useMemo<ColumnDef<{}, DataTypeHelper>[]>(
() => [
{
header: () => "First Name",
accessorKey: "firstName",
},
{
header: () => "Last Name",
accessorKey: "lastName",
},
{
header: () => "Age",
accessorKey: "age",
cell: (props) => props.getValue(),
},
{
header: () => "Visits",
accessorKey: "visits",
cell: (props) => props.getValue(),
},
{
header: () => "Progress",
accessorKey: "progress",
cell: (props) => props.getValue(),
},
{
header: () => "Activity",
accessorKey: "activity",
},
{
header: () => "Status",
accessorKey: "status",
},
],
[],
);
return (
<div className="border border-beerus rounded-lg overflow-hidden">
<Table
columns={columns}
data={data}
width={800}
height={400}
layout="stretched-auto"
rowActiveColor="goku"
rowHoverColor="beerus"
isSelectable={true}
getOnRowClickHandler={(row: Row<{}>) => () => {
console.log(`You clicked row with ID - ${row.id}`);
}}
/>
</div>
);
};
export default Example;
Expandable rows
This example demonstrates the capabilities of a table with pre-set expandable rows.
Use the mouse wheel or the arrow keys on the keyboard to scroll the data up and down.
Name | Info | Actions | ||||
|---|---|---|---|---|---|---|
More Info | ||||||
First Name | Last Name | Age | Visits | Status | Profile Progress | Actions |
FirstName | LastName | 40 | 1000 | complicated | 100 | |
FirstName | LastName | 40 | 1000 | complicated | 100 | |
FirstName | LastName | 40 | 1000 | complicated | 100 | |
FirstName | LastName | 40 | 1000 | complicated | 100 | |
FirstName | LastName | 40 | 1000 | complicated | 100 | |
FirstName | LastName | 40 | 1000 | complicated | 100 | |
FirstName | LastName | 40 | 1000 | complicated | 100 | |
FirstName | LastName | 40 | 1000 | complicated | 100 | |
FirstName | LastName | 40 | 1000 | complicated | 100 | |
FirstName | LastName | 40 | 1000 | complicated | 100 | |
FirstName | LastName | 40 | 1000 | complicated | 100 | |
FirstName | LastName | 40 | 1000 | complicated | 100 | |
FirstName | LastName | 40 | 1000 | complicated | 100 | |
FirstName | LastName | 40 | 1000 | complicated | 100 | |
FirstName | LastName | 40 | 1000 | complicated | 100 | |
FirstName | LastName | 40 | 1000 | complicated | 100 | |
FirstName | LastName | 40 | 1000 | complicated | 100 | |
FirstName | LastName | 40 | 1000 | complicated | 100 | |
Name | Info | Actions | ||||
"use client";
import React, { useCallback } from "react";
import Table from "@heathmont/moon-table-v8-tw/lib/es/components/Table";
import DataHelper from "@heathmont/moon-table-v8-tw/lib/es/private/types/DataHelper";
import { ExpandedState, ColumnDef } from "@tanstack/react-table";
import {
ArrowsRefreshRound,
ControlsChevronDown,
ControlsChevronRight,
} from "@heathmont/moon-icons-tw";
import { Chip, Tooltip } from "@heathmont/moon-core-tw";
interface Person extends DataHelper {
firstName: string;
lastName: string;
age: number;
visits: number;
progress: number;
status: "relationship" | "complicated" | "single";
actions: React.JSX.Element;
subRows?: Person[];
}
const Example = () => {
const range = useCallback((len: number) => {
const arr = [];
for (let i = 0; i < len; i++) {
arr.push(i);
}
return arr;
}, []);
const tooltip = React.useMemo(
() => (
<Tooltip>
<Tooltip.Trigger className="max-h-6">
<Chip
variant="ghost"
iconOnly={<ArrowsRefreshRound className="text-moon-24 max-h-6" />}
onClick={() => {
window.location.reload();
}}
/>
</Tooltip.Trigger>
<Tooltip.Content position="top-start" className="z-[2]">
Reload page
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip>
),
[],
);
const newPerson = React.useMemo((): Person => {
return {
firstName: "FirstName",
lastName: "LastName",
age: 40,
visits: 1000,
progress: 100,
status: "complicated",
actions: tooltip,
};
}, [tooltip]);
const makeData = useCallback(
(...lens: number[]) => {
const makeDataLevel = (depth = 0): Person[] => {
const len = lens[depth]!;
return range(len).map((d): Person => {
return {
...newPerson,
subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
};
});
};
return makeDataLevel();
},
[newPerson, range],
);
const columns = React.useMemo<ColumnDef<{}, Person>[]>(
() => [
{
header: "Name",
footer: "Name",
columns: [
{
accessorKey: "firstName",
header: ({ table }) => (
<>
<button onClick={table.getToggleAllRowsExpandedHandler()}>
{table.getIsAllRowsExpanded() ? (
<ControlsChevronDown />
) : (
<ControlsChevronRight />
)}
</button>{" "}
First Name
</>
),
cell: ({ row, getValue }) => (
<div
style={{
paddingLeft: `${row.depth * 2}rem`,
}}
className="flex gap-x-1"
>
<>
{row.getCanExpand() ? (
<button
className="cursor-pointer"
onClick={row.getToggleExpandedHandler()}
>
{row.getIsExpanded() ? (
<ControlsChevronDown />
) : (
<ControlsChevronRight />
)}
</button>
) : null}
{getValue()}
</>
</div>
),
},
{
accessorFn: (row: Person) => row.lastName,
id: "lastName",
cell: (info) => info.getValue(),
header: () => <span>Last Name</span>,
},
],
},
{
header: "Info",
footer: "Info",
columns: [
{
accessorKey: "age",
header: "Age",
},
{
header: "More Info",
columns: [
{
accessorKey: "visits",
header: () => <span>Visits</span>,
},
{
accessorKey: "status",
header: "Status",
},
{
accessorKey: "progress",
header: "Profile Progress",
},
],
},
],
},
{
id: "actions",
header: "Actions",
footer: (props) => "Actions",
columns: [
{
header: "Actions",
accessorKey: "actions",
cell: (props) => props.getValue(),
},
],
},
],
[],
);
const preset: ExpandedState = {
"0": true,
"0.2": true,
"0.2.1": true,
};
const [expanded, setExpanded] = React.useState<ExpandedState>(preset);
const [data, setData] = React.useState(makeData(10, 5, 3));
const getSubRows = useCallback(
({ subRows }: DataHelper) => subRows as DataHelper[],
[],
);
return (
<div className="border border-beerus rounded-lg overflow-hidden">
<Table
columns={columns}
data={data}
width={800}
height={600}
layout="stretched-auto"
state={{ expanded }}
getSubRows={getSubRows}
onExpandedChange={setExpanded}
withFooter={true}
/>
</div>
);
};
export default Example;
Selectable rows
This example demonstrates the capabilities of a table with pre-set selectable rows.
Use the mouse wheel or the arrow keys on the keyboard to scroll the data up and down.
Watch the result of the row selection in the browser console.
First Name | Last Name | Age | Visits | Progress | Activity | Status | Actions |
|---|---|---|---|---|---|---|---|
| Test | Test | 0 | 0 | 0 | 0 | 0 | |
| Test | Test | 30 | 100 | 100 | 100 | 100 | |
| Test | Test | 60 | 200 | 200 | 200 | 200 | |
| Test | Test | 90 | 300 | 300 | 300 | 300 | |
| Test | Test | 120 | 400 | 400 | 400 | 400 | |
| Test | Test | 150 | 500 | 500 | 500 | 500 | |
| Test | Test | 180 | 600 | 600 | 600 | 600 | |
| Test | Test | 210 | 700 | 700 | 700 | 700 | |
| Test | Test | 240 | 800 | 800 | 800 | 800 | |
| Test | Test | 270 | 900 | 900 | 900 | 900 | |
| Test | Test | 300 | 1000 | 1000 | 1000 | 1000 | |
| Test | Test | 330 | 1100 | 1100 | 1100 | 1100 | |
| Test | Test | 360 | 1200 | 1200 | 1200 | 1200 | |
| Test | Test | 390 | 1300 | 1300 | 1300 | 1300 | |
| Test | Test | 420 | 1400 | 1400 | 1400 | 1400 | |
| Test | Test | 450 | 1500 | 1500 | 1500 | 1500 | |
| Test | Test | 480 | 1600 | 1600 | 1600 | 1600 | |
| Test | Test | 510 | 1700 | 1700 | 1700 | 1700 | |
| Test | Test | 540 | 1800 | 1800 | 1800 | 1800 | |
| Test | Test | 570 | 1900 | 1900 | 1900 | 1900 |
"use client";
import { Chip, Tooltip } from "@heathmont/moon-core-tw";
import { ArrowsRefreshRound } from "@heathmont/moon-icons-tw";
import Table from "@heathmont/moon-table-v8-tw/lib/es/components/Table";
import {
ColumnDef,
Row,
RowSelectionState,
flexRender,
} from "@tanstack/react-table";
import React, { ReactNode, useCallback } from "react";
type DataTypeHelper = {
firstName: string;
lastName: string;
age: string;
visits: string;
progress: string;
status: number;
activity: number;
actions: () => void;
};
const preset: RowSelectionState = {
1: true,
3: true,
4: true,
11: true,
16: true,
};
const Example = () => {
const tooltip = React.useMemo(
() => (
<Tooltip>
<Tooltip.Trigger className="max-h-6">
<Chip
variant="ghost"
iconOnly={<ArrowsRefreshRound className="text-moon-24 max-h-6" />}
onClick={() => {
window.location.reload();
}}
/>
</Tooltip.Trigger>
<Tooltip.Content position="top-start" className="z-[2]">
Reload page
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip>
),
[],
);
const makeData = useCallback(
(length: number) => {
return Array.from("_".repeat(length)).map((_, index) => {
return {
firstName: "Test",
lastName: "Test",
age: <span>{Math.floor(index * 30)}</span>,
visits: <span>{Math.floor(index * 100)}</span>,
progress: <span>{Math.floor(index * 100)}</span>,
status: Math.floor(index * 100),
activity: Math.floor(index * 100),
actions: tooltip,
};
});
},
[tooltip],
);
const [rowSelection, setRowSelection] =
React.useState<RowSelectionState>(preset);
const [data, setData] = React.useState(makeData(20));
const columns = React.useMemo<ColumnDef<{}, DataTypeHelper>[]>(
() => [
{
header: () => "First Name",
accessorKey: "firstName",
},
{
header: () => "Last Name",
accessorKey: "lastName",
},
{
header: () => "Age",
accessorKey: "age",
cell: (props) => (
<div onClick={props.row.getToggleSelectedHandler()}>
{props.getValue() as unknown as ReactNode}
</div>
),
},
{
header: () => "Visits",
accessorKey: "visits",
cell: (props) => (
<div onClick={props.row.getToggleSelectedHandler()}>
{props.getValue() as unknown as ReactNode}
</div>
),
},
{
header: () => "Progress",
accessorKey: "progress",
cell: (props) => (
<div onClick={props.row.getToggleSelectedHandler()}>
{props.getValue() as unknown as ReactNode}
</div>
),
},
{
header: () => "Activity",
accessorKey: "activity",
},
{
header: () => "Status",
accessorKey: "status",
},
{
header: () => "Actions",
accessorKey: "actions",
cell: (props) => props.getValue(),
},
],
[],
);
return (
<div className="border border-beerus rounded-lg overflow-hidden">
<Table
columns={columns}
data={data}
width={800}
height={400}
layout="stretched-auto"
state={{ rowSelection }}
onRowSelectionChange={setRowSelection}
isSelectable={true}
getOnRowSelectHandler={() => (rows: Row<{}>[]) => {
console.log(
`IDs of selected rows - ${rows.map((row: Row<{}>) => row.id)}`,
);
}}
/>
</div>
);
};
export default Example;
Selectable rows with checkboxes
This example demonstrates the capabilities of a table with pre-set checkboxes in the selectable rows.
Use the mouse wheel or the arrow keys on the keyboard to scroll the data up and down.
Watch the result of the row selection in the browser console.
First Name | Last Name | Age | Visits | Progress | Activity | Status | Actions | |
|---|---|---|---|---|---|---|---|---|
| Test | Test | 0 | 0 | 0 | 0 | 0 | ||
| Test | Test | 30 | 100 | 100 | 100 | 100 | ||
| Test | Test | 60 | 200 | 200 | 200 | 200 | ||
| Test | Test | 90 | 300 | 300 | 300 | 300 | ||
| Test | Test | 120 | 400 | 400 | 400 | 400 | ||
| Test | Test | 150 | 500 | 500 | 500 | 500 | ||
| Test | Test | 180 | 600 | 600 | 600 | 600 | ||
| Test | Test | 210 | 700 | 700 | 700 | 700 | ||
| Test | Test | 240 | 800 | 800 | 800 | 800 | ||
| Test | Test | 270 | 900 | 900 | 900 | 900 | ||
| Test | Test | 300 | 1000 | 1000 | 1000 | 1000 | ||
| Test | Test | 330 | 1100 | 1100 | 1100 | 1100 | ||
| Test | Test | 360 | 1200 | 1200 | 1200 | 1200 | ||
| Test | Test | 390 | 1300 | 1300 | 1300 | 1300 | ||
| Test | Test | 420 | 1400 | 1400 | 1400 | 1400 | ||
| Test | Test | 450 | 1500 | 1500 | 1500 | 1500 | ||
| Test | Test | 480 | 1600 | 1600 | 1600 | 1600 | ||
| Test | Test | 510 | 1700 | 1700 | 1700 | 1700 | ||
| Test | Test | 540 | 1800 | 1800 | 1800 | 1800 | ||
| Test | Test | 570 | 1900 | 1900 | 1900 | 1900 |
"use client";
import { Checkbox, Chip, Tooltip } from "@heathmont/moon-core-tw";
import { ArrowsRefreshRound } from "@heathmont/moon-icons-tw";
import Table from "@heathmont/moon-table-v8-tw/lib/es/components/Table";
import { ColumnDef, Row, RowSelectionState } from "@tanstack/react-table";
import React, { useCallback } from "react";
type DataTypeHelper = {
firstName: string;
lastName: string;
age: string;
visits: string;
progress: string;
status: number;
activity: number;
actions: () => void;
};
const preset: RowSelectionState = {
1: true,
3: true,
4: true,
11: true,
16: true,
};
const Example = () => {
const tooltip = React.useMemo(
() => (
<Tooltip>
<Tooltip.Trigger className="max-h-6">
<Chip
variant="ghost"
iconOnly={<ArrowsRefreshRound className="text-moon-24 max-h-6" />}
onClick={() => {
window.location.reload();
}}
/>
</Tooltip.Trigger>
<Tooltip.Content position="top-start" className="z-[2]">
Reload page
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip>
),
[],
);
const makeData = useCallback(
(length: number) => {
return Array.from("_".repeat(length)).map((_, index) => {
return {
firstName: "Test",
lastName: "Test",
age: <span>{Math.floor(index * 30)}</span>,
visits: <span>{Math.floor(index * 100)}</span>,
progress: <span>{Math.floor(index * 100)}</span>,
status: Math.floor(index * 100),
activity: Math.floor(index * 100),
actions: tooltip,
};
});
},
[tooltip],
);
const [rowSelection, setRowSelection] =
React.useState<RowSelectionState>(preset);
const [data, setData] = React.useState(makeData(20));
const columns = React.useMemo<ColumnDef<{}, DataTypeHelper>[]>(
() => [
{
id: "select",
header: ({ table }) => (
<div className="w-8 px-1">
<Checkbox
checked={table.getIsAllRowsSelected()}
indeterminate={table.getIsSomeRowsSelected()}
onChange={table.getToggleAllRowsSelectedHandler()}
/>
</div>
),
cell: ({ row }) => (
<div className="w-8 px-1">
<Checkbox
checked={row.getIsSelected()}
disabled={!row.getCanSelect()}
onChange={row.getToggleSelectedHandler()}
/>
</div>
),
},
{
header: () => "First Name",
accessorKey: "firstName",
},
{
header: () => "Last Name",
accessorKey: "lastName",
},
{
header: () => "Age",
accessorKey: "age",
cell: (props) => props.getValue(),
},
{
header: () => "Visits",
accessorKey: "visits",
cell: (props) => props.getValue(),
},
{
header: () => "Progress",
accessorKey: "progress",
cell: (props) => props.getValue(),
},
{
header: () => "Activity",
accessorKey: "activity",
},
{
header: () => "Status",
accessorKey: "status",
},
{
header: () => "Actions",
accessorKey: "actions",
cell: (props) => props.getValue(),
},
],
[],
);
return (
<div className="border border-beerus rounded-lg overflow-hidden">
<Table
columns={columns}
data={data}
width={800}
height={400}
layout="stretched-auto"
state={{ rowSelection }}
onRowSelectionChange={setRowSelection}
preventSelectionByRowClick={true}
isSelectable={true}
getOnRowSelectHandler={() => (rows: Row<{}>[]) => {
console.log(
`IDs of selected rows - ${rows.map((row: Row<{}>) => row.id)}`,
);
}}
/>
</div>
);
};
export default Example;
Expandable/Selectable rows
This example is a combination of expandable and selectable tables with pre-set parameters.
Use the mouse wheel or the arrow keys on the keyboard to scroll the data up and down.
Expand/Select | Name | Info | Actions | ||||
|---|---|---|---|---|---|---|---|
First Name | Age | Visits | Activity | Status | Profile Progress | Actions | |
| Lvl1 | 36 | 50 | 54 | 19 | 20 | ||
| Sub lvl2 | 96 | 8 | 23 | 97 | 2 | ||
| Sub lvl3 | 63 | 82 | 46 | 52 | 59 | ||
| Sub lvl3 | 64 | 35 | 5 | 65 | 78 | ||
| Sub lvl3 | 12 | 4 | 5 | 98 | 44 | ||
| Sub lvl2 | 74 | 5 | 2 | 86 | 1 | ||
| Sub lvl3 | 89 | 98 | 43 | 24 | 54 | ||
| Sub lvl3 | 52 | 25 | 35 | 97 | 25 | ||
| Sub lvl3 | 55 | 54 | 33 | 56 | 24 | ||
| Sub lvl2 | 53 | 63 | 3 | 48 | 24 | ||
| Sub lvl3 | 4 | 653 | 43 | 44 | 36 | ||
| Sub lvl3 | 49 | 45 | 4 | 35 | 454 | ||
"use client";
import {
Checkbox,
Chip,
Tooltip,
mergeClassnames,
} from "@heathmont/moon-core-tw";
import DataHelper from "@heathmont/moon-table-v8-tw/lib/es/private/types/DataHelper";
import {
ArrowsRefreshRound,
ControlsChevronDown,
ControlsChevronRight,
} from "@heathmont/moon-icons-tw";
import Table from "@heathmont/moon-table-v8-tw/lib/es/components/Table";
import {
ColumnDef,
ExpandedState,
Row,
RowSelectionState,
Table as TanStackTable,
} from "@tanstack/react-table";
import React, { useCallback } from "react";
interface DataTypeHelper extends DataHelper {
firstName: string;
lastName: string;
age: string;
visits: string;
progress: string;
status: number;
actions: () => void;
subRows?: DataTypeHelper[];
}
const columnShift = (depth: number) => {
const shiftMap: { [key: number]: string } = ["ps-0", "ps-6", "ps-12"];
return shiftMap[depth];
};
const preset: RowSelectionState = {
0: true,
"0.1": true,
"0.1.0": true,
"0.1.1": true,
};
const Example = () => {
const tooltip = React.useMemo(
() => (
<Tooltip>
<Tooltip.Trigger className="max-h-6">
<Chip
variant="ghost"
iconOnly={<ArrowsRefreshRound className="text-moon-24 max-h-6" />}
onClick={() => {
window.location.reload();
}}
/>
</Tooltip.Trigger>
<Tooltip.Content position="top-start" className="z-[2]">
Reload page
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip>
),
[],
);
const makeData = React.useMemo(
() => [
{
firstName: "Lvl1",
age: <span>36</span>,
visits: <span>50</span>,
progress: <span>20</span>,
status: 19,
activity: 54,
actions: tooltip,
subRows: [
{
firstName: "Sub lvl2",
age: <span>96</span>,
visits: <span>8</span>,
progress: <span>2</span>,
status: 97,
activity: 23,
actions: tooltip,
subRows: [
{
firstName: "Sub lvl3",
age: <span>63</span>,
visits: <span>82</span>,
progress: <span>59</span>,
status: 52,
activity: 46,
actions: tooltip,
},
{
firstName: "Sub lvl3",
age: <span>64</span>,
visits: <span>35</span>,
progress: <span>78</span>,
status: 65,
activity: 5,
actions: tooltip,
},
{
firstName: "Sub lvl3",
age: <span>12</span>,
visits: <span>4</span>,
progress: <span>44</span>,
status: 98,
activity: 5,
actions: tooltip,
},
],
},
{
firstName: "Sub lvl2",
age: <span>74</span>,
visits: <span>5</span>,
progress: <span>1</span>,
status: 86,
activity: 2,
actions: tooltip,
subRows: [
{
firstName: "Sub lvl3",
age: <span>89</span>,
visits: <span>98</span>,
progress: <span>54</span>,
status: 24,
activity: 43,
actions: tooltip,
},
{
firstName: "Sub lvl3",
age: <span>52</span>,
visits: <span>25</span>,
progress: <span>25</span>,
status: 97,
activity: 35,
actions: tooltip,
},
{
firstName: "Sub lvl3",
age: <span>55</span>,
visits: <span>54</span>,
progress: <span>24</span>,
status: 56,
activity: 33,
actions: tooltip,
},
],
},
{
firstName: "Sub lvl2",
age: <span>53</span>,
visits: <span>63</span>,
progress: <span>24</span>,
status: 48,
activity: 3,
actions: tooltip,
subRows: [
{
firstName: "Sub lvl3",
age: <span>4</span>,
visits: <span>653</span>,
progress: <span>36</span>,
status: 44,
activity: 43,
actions: tooltip,
},
{
firstName: "Sub lvl3",
age: <span>49</span>,
visits: <span>45</span>,
progress: <span>454</span>,
status: 35,
activity: 4,
actions: tooltip,
},
],
},
],
},
],
[tooltip],
);
const [rowSelection, setRowSelection] =
React.useState<RowSelectionState>(preset);
const [expanded, setExpanded] = React.useState<ExpandedState>(true);
const [data, setData] = React.useState(makeData);
const trackCheckState = (row: Row<{}>, table: TanStackTable<{}>) => {
let parentRowId = row.parentId;
while (parentRowId) {
const nodeRow = table.getRow(parentRowId);
if (nodeRow.getIsAllSubRowsSelected() && !nodeRow.getIsSelected()) {
setRowSelection({ ...rowSelection, [nodeRow.id]: true });
} else if (
!nodeRow.getIsAllSubRowsSelected() &&
nodeRow.getIsSelected()
) {
setRowSelection(
Object.keys(rowSelection)
.filter((rowId) => rowId !== nodeRow.id)
.reduce((acc: RowSelectionState, rowId: string) => {
acc[rowId] = true;
return acc;
}, {}),
);
}
parentRowId = nodeRow.parentId;
}
return row.getIsSelected();
};
const trackIndeterminateState = (row: Row<{}>) => {
const match = new RegExp(`(^${row.id}[\\.]|^${row.id}$)`, "");
const matches = Object.keys(rowSelection).filter(
(rowId) => match.test(rowId) && rowId !== row.id,
);
return (
!row.getIsAllSubRowsSelected() &&
matches.some((rowId) => rowSelection[rowId] === true)
);
};
const columns = React.useMemo<ColumnDef<{}, DataTypeHelper>[]>(
() => [
{
id: "expand/select",
header: () => "Expand/Select",
columns: [
{
id: "select",
header: ({ table }) => (
<div className="flex px-0 gap-x-1">
<Checkbox
checked={table.getIsAllRowsSelected()}
indeterminate={table.getIsSomeRowsSelected()}
onChange={table.getToggleAllRowsSelectedHandler()}
/>
<button onClick={table.getToggleAllRowsExpandedHandler()}>
{table.getIsAllRowsExpanded() ? (
<ControlsChevronDown />
) : (
<ControlsChevronRight />
)}
</button>
</div>
),
cell: ({ row, table }) => (
<div
className={mergeClassnames(
"flex gap-x-1",
columnShift(row.depth),
)}
>
<Checkbox
checked={trackCheckState(row, table)}
disabled={!row.getCanSelect()}
indeterminate={trackIndeterminateState(row)}
onChange={row.getToggleSelectedHandler()}
/>
{row.getCanExpand() ? (
<button
onClick={row.getToggleExpandedHandler()}
className="cursor-pointer"
>
{row.getIsExpanded() ? (
<ControlsChevronDown />
) : (
<ControlsChevronRight />
)}
</button>
) : (
""
)}
</div>
),
},
],
},
{
id: "name",
header: () => "Name",
columns: [
{
header: () => "First Name",
accessorKey: "firstName",
},
],
},
{
id: "info",
header: () => "Info",
columns: [
{
header: () => "Age",
accessorKey: "age",
cell: (props) => props.getValue(),
size: 30,
},
{
header: () => "Visits",
accessorKey: "visits",
cell: (props) => props.getValue(),
size: 60,
},
{
header: () => "Activity",
accessorKey: "activity",
size: 80,
},
{
header: () => "Status",
accessorKey: "status",
size: 80,
},
{
header: () => "Profile Progress",
accessorKey: "progress",
cell: (props) => props.getValue(),
},
],
},
{
id: "actions",
header: () => "Actions",
size: 90,
columns: [
{
header: () => "Actions",
accessorKey: "actions",
cell: (props) => props.getValue(),
size: 90,
},
],
},
],
// eslint-disable-next-line react-hooks/exhaustive-deps
[rowSelection],
);
const getSubRows = useCallback(
({ subRows }: DataHelper) => subRows as DataHelper[],
[],
);
return (
<div className="border border-beerus rounded-lg overflow-hidden">
<Table
columns={columns}
data={data}
width={800}
height={400}
layout="stretched-auto"
state={{ expanded, rowSelection }}
getSubRows={getSubRows}
onExpandedChange={setExpanded}
onRowSelectionChange={setRowSelection}
preventSelectionByRowClick={true}
isSelectable={true}
/>
</div>
);
};
export default Example;
A table with minimap
Name | Info | Info1 | Info2 | Info3 | Info4 | Info5 | Progress | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
First Name | Last Name | Age | Visits | Activity | Age1 | Visits1 | Activity1 | Age2 | Visits2 | Activity2 | Age3 | Visits3 | Activity3 | Age4 | Visits4 | Activity4 | Age5 | Visits5 | Activity5 | Profile Progress |
| Test | Test | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 0 |
| Test | Test | 30 | 100 | 100 | 30 | 100 | 100 | 30 | 100 | 100 | 30 | 100 | 100 | 30 | 100 | 100 | 30 | 100 | 100 | 100 |
| Test | Test | 60 | 200 | 200 | 60 | 200 | 200 | 60 | 200 | 200 | 60 | 200 | 200 | 60 | 200 | 200 | 60 | 200 | 200 | 200 |
| Test | Test | 90 | 300 | 300 | 90 | 300 | 300 | 90 | 300 | 300 | 90 | 300 | 300 | 90 | 300 | 300 | 90 | 300 | 300 | 300 |
| Test | Test | 120 | 400 | 400 | 120 | 400 | 400 | 120 | 400 | 400 | 120 | 400 | 400 | 120 | 400 | 400 | 120 | 400 | 400 | 400 |
| Test | Test | 150 | 500 | 500 | 150 | 500 | 500 | 150 | 500 | 500 | 150 | 500 | 500 | 150 | 500 | 500 | 150 | 500 | 500 | 500 |
| Test | Test | 180 | 600 | 600 | 180 | 600 | 600 | 180 | 600 | 600 | 180 | 600 | 600 | 180 | 600 | 600 | 180 | 600 | 600 | 600 |
| Test | Test | 210 | 700 | 700 | 210 | 700 | 700 | 210 | 700 | 700 | 210 | 700 | 700 | 210 | 700 | 700 | 210 | 700 | 700 | 700 |
| Test | Test | 240 | 800 | 800 | 240 | 800 | 800 | 240 | 800 | 800 | 240 | 800 | 800 | 240 | 800 | 800 | 240 | 800 | 800 | 800 |
| Test | Test | 270 | 900 | 900 | 270 | 900 | 900 | 270 | 900 | 900 | 270 | 900 | 900 | 270 | 900 | 900 | 270 | 900 | 900 | 900 |
| Test | Test | 300 | 1000 | 1000 | 300 | 1000 | 1000 | 300 | 1000 | 1000 | 300 | 1000 | 1000 | 300 | 1000 | 1000 | 300 | 1000 | 1000 | 1000 |
| Test | Test | 330 | 1100 | 1100 | 330 | 1100 | 1100 | 330 | 1100 | 1100 | 330 | 1100 | 1100 | 330 | 1100 | 1100 | 330 | 1100 | 1100 | 1100 |
| Test | Test | 360 | 1200 | 1200 | 360 | 1200 | 1200 | 360 | 1200 | 1200 | 360 | 1200 | 1200 | 360 | 1200 | 1200 | 360 | 1200 | 1200 | 1200 |
| Test | Test | 390 | 1300 | 1300 | 390 | 1300 | 1300 | 390 | 1300 | 1300 | 390 | 1300 | 1300 | 390 | 1300 | 1300 | 390 | 1300 | 1300 | 1300 |
| Test | Test | 420 | 1400 | 1400 | 420 | 1400 | 1400 | 420 | 1400 | 1400 | 420 | 1400 | 1400 | 420 | 1400 | 1400 | 420 | 1400 | 1400 | 1400 |
| Test | Test | 450 | 1500 | 1500 | 450 | 1500 | 1500 | 450 | 1500 | 1500 | 450 | 1500 | 1500 | 450 | 1500 | 1500 | 450 | 1500 | 1500 | 1500 |
| Test | Test | 480 | 1600 | 1600 | 480 | 1600 | 1600 | 480 | 1600 | 1600 | 480 | 1600 | 1600 | 480 | 1600 | 1600 | 480 | 1600 | 1600 | 1600 |
| Test | Test | 510 | 1700 | 1700 | 510 | 1700 | 1700 | 510 | 1700 | 1700 | 510 | 1700 | 1700 | 510 | 1700 | 1700 | 510 | 1700 | 1700 | 1700 |
| Test | Test | 540 | 1800 | 1800 | 540 | 1800 | 1800 | 540 | 1800 | 1800 | 540 | 1800 | 1800 | 540 | 1800 | 1800 | 540 | 1800 | 1800 | 1800 |
| Test | Test | 570 | 1900 | 1900 | 570 | 1900 | 1900 | 570 | 1900 | 1900 | 570 | 1900 | 1900 | 570 | 1900 | 1900 | 570 | 1900 | 1900 | 1900 |
| Test | Test | 600 | 2000 | 2000 | 600 | 2000 | 2000 | 600 | 2000 | 2000 | 600 | 2000 | 2000 | 600 | 2000 | 2000 | 600 | 2000 | 2000 | 2000 |
| Test | Test | 630 | 2100 | 2100 | 630 | 2100 | 2100 | 630 | 2100 | 2100 | 630 | 2100 | 2100 | 630 | 2100 | 2100 | 630 | 2100 | 2100 | 2100 |
| Test | Test | 660 | 2200 | 2200 | 660 | 2200 | 2200 | 660 | 2200 | 2200 | 660 | 2200 | 2200 | 660 | 2200 | 2200 | 660 | 2200 | 2200 | 2200 |
| Test | Test | 690 | 2300 | 2300 | 690 | 2300 | 2300 | 690 | 2300 | 2300 | 690 | 2300 | 2300 | 690 | 2300 | 2300 | 690 | 2300 | 2300 | 2300 |
| Test | Test | 720 | 2400 | 2400 | 720 | 2400 | 2400 | 720 | 2400 | 2400 | 720 | 2400 | 2400 | 720 | 2400 | 2400 | 720 | 2400 | 2400 | 2400 |
| Test | Test | 750 | 2500 | 2500 | 750 | 2500 | 2500 | 750 | 2500 | 2500 | 750 | 2500 | 2500 | 750 | 2500 | 2500 | 750 | 2500 | 2500 | 2500 |
| Test | Test | 780 | 2600 | 2600 | 780 | 2600 | 2600 | 780 | 2600 | 2600 | 780 | 2600 | 2600 | 780 | 2600 | 2600 | 780 | 2600 | 2600 | 2600 |
| Test | Test | 810 | 2700 | 2700 | 810 | 2700 | 2700 | 810 | 2700 | 2700 | 810 | 2700 | 2700 | 810 | 2700 | 2700 | 810 | 2700 | 2700 | 2700 |
| Test | Test | 840 | 2800 | 2800 | 840 | 2800 | 2800 | 840 | 2800 | 2800 | 840 | 2800 | 2800 | 840 | 2800 | 2800 | 840 | 2800 | 2800 | 2800 |
| Test | Test | 870 | 2900 | 2900 | 870 | 2900 | 2900 | 870 | 2900 | 2900 | 870 | 2900 | 2900 | 870 | 2900 | 2900 | 870 | 2900 | 2900 | 2900 |
| Test | Test | 900 | 3000 | 3000 | 900 | 3000 | 3000 | 900 | 3000 | 3000 | 900 | 3000 | 3000 | 900 | 3000 | 3000 | 900 | 3000 | 3000 | 3000 |
| Test | Test | 930 | 3100 | 3100 | 930 | 3100 | 3100 | 930 | 3100 | 3100 | 930 | 3100 | 3100 | 930 | 3100 | 3100 | 930 | 3100 | 3100 | 3100 |
| Test | Test | 960 | 3200 | 3200 | 960 | 3200 | 3200 | 960 | 3200 | 3200 | 960 | 3200 | 3200 | 960 | 3200 | 3200 | 960 | 3200 | 3200 | 3200 |
| Test | Test | 990 | 3300 | 3300 | 990 | 3300 | 3300 | 990 | 3300 | 3300 | 990 | 3300 | 3300 | 990 | 3300 | 3300 | 990 | 3300 | 3300 | 3300 |
| Test | Test | 1020 | 3400 | 3400 | 1020 | 3400 | 3400 | 1020 | 3400 | 3400 | 1020 | 3400 | 3400 | 1020 | 3400 | 3400 | 1020 | 3400 | 3400 | 3400 |
| Test | Test | 1050 | 3500 | 3500 | 1050 | 3500 | 3500 | 1050 | 3500 | 3500 | 1050 | 3500 | 3500 | 1050 | 3500 | 3500 | 1050 | 3500 | 3500 | 3500 |
| Test | Test | 1080 | 3600 | 3600 | 1080 | 3600 | 3600 | 1080 | 3600 | 3600 | 1080 | 3600 | 3600 | 1080 | 3600 | 3600 | 1080 | 3600 | 3600 | 3600 |
| Test | Test | 1110 | 3700 | 3700 | 1110 | 3700 | 3700 | 1110 | 3700 | 3700 | 1110 | 3700 | 3700 | 1110 | 3700 | 3700 | 1110 | 3700 | 3700 | 3700 |
| Test | Test | 1140 | 3800 | 3800 | 1140 | 3800 | 3800 | 1140 | 3800 | 3800 | 1140 | 3800 | 3800 | 1140 | 3800 | 3800 | 1140 | 3800 | 3800 | 3800 |
| Test | Test | 1170 | 3900 | 3900 | 1170 | 3900 | 3900 | 1170 | 3900 | 3900 | 1170 | 3900 | 3900 | 1170 | 3900 | 3900 | 1170 | 3900 | 3900 | 3900 |
"use client";
import Table from "@heathmont/moon-table-v8-tw/lib/es/components/Table";
import { ColumnDef } from "@tanstack/react-table";
import React from "react";
type DataTypeHelper = {
firstName: string;
lastName: string;
age: number;
visits: number;
progress: number;
status: number;
activity: number;
age1: number;
visits1: number;
progress1: number;
status1: number;
activity1: number;
age2: number;
visits2: number;
progress2: number;
status2: number;
activity2: number;
age3: number;
visits3: number;
progress3: number;
status3: number;
activity3: number;
age4: number;
visits4: number;
progress4: number;
status4: number;
activity4: number;
age5: number;
visits5: number;
progress5: number;
status5: number;
activity5: number;
};
const Example = () => {
const columns = React.useMemo<ColumnDef<{}, DataTypeHelper>[]>(
() => [
{
id: "name",
header: () => "Name",
sticky: "left",
columns: [
{
header: () => "First Name",
accessorKey: "firstName",
size: 60,
},
{
header: () => "Last Name",
accessorKey: "lastName",
size: 60,
},
],
},
{
id: "info",
header: () => "Info",
columns: [
{
header: () => "Age",
cell: (props) => props.getValue(),
accessorKey: "age",
size: 50,
},
{
header: () => "Visits",
cell: (props) => props.getValue(),
accessorKey: "visits",
},
{
header: () => "Activity",
accessorKey: "activity",
},
],
},
{
id: "info1",
header: () => "Info1",
columns: [
{
header: () => "Age1",
cell: (props) => props.getValue(),
accessorKey: "age1",
size: 50,
},
{
header: () => "Visits1",
cell: (props) => props.getValue(),
accessorKey: "visits1",
},
{
header: () => "Activity1",
accessorKey: "activity1",
},
],
},
{
id: "info2",
header: () => "Info2",
columns: [
{
header: () => "Age2",
cell: (props) => props.getValue(),
accessorKey: "age2",
size: 50,
},
{
header: () => "Visits2",
cell: (props) => props.getValue(),
accessorKey: "visits2",
},
{
header: () => "Activity2",
accessorKey: "activity2",
},
],
},
{
id: "info3",
header: () => "Info3",
columns: [
{
header: () => "Age3",
cell: (props) => props.getValue(),
accessorKey: "age3",
size: 50,
},
{
header: () => "Visits3",
cell: (props) => props.getValue(),
accessorKey: "visits3",
},
{
header: () => "Activity3",
accessorKey: "activity3",
},
],
},
{
id: "info4",
header: () => "Info4",
columns: [
{
header: () => "Age4",
cell: (props) => props.getValue(),
accessorKey: "age4",
size: 50,
},
{
header: () => "Visits4",
cell: (props) => props.getValue(),
accessorKey: "visits4",
},
{
header: () => "Activity4",
accessorKey: "activity4",
},
],
},
{
id: "info5",
header: () => "Info5",
columns: [
{
header: () => "Age5",
cell: (props) => props.getValue(),
accessorKey: "age5",
size: 50,
},
{
header: () => "Visits5",
cell: (props) => props.getValue(),
accessorKey: "visits5",
},
{
header: () => "Activity5",
accessorKey: "activity5",
},
],
},
{
id: "progress",
header: () => "Progress",
sticky: "right",
columns: [
{
header: () => "Profile Progress",
cell: (props) => props.getValue(),
accessorKey: "progress",
},
],
},
],
[],
);
const makeData = React.useCallback((length: number) => {
return Array.from("_".repeat(length)).map((_, index) => {
return {
firstName: "Test",
lastName: "Test",
age: <span>{Math.floor(index * 30)}</span>,
visits: <span>{Math.floor(index * 100)}</span>,
activity: Math.floor(index * 100),
progress: <span>{Math.floor(index * 100)}</span>,
status: Math.floor(index * 100),
age1: <span>{Math.floor(index * 30)}</span>,
visits1: <span>{Math.floor(index * 100)}</span>,
activity1: Math.floor(index * 100),
age2: <span>{Math.floor(index * 30)}</span>,
visits2: <span>{Math.floor(index * 100)}</span>,
activity2: Math.floor(index * 100),
age3: <span>{Math.floor(index * 30)}</span>,
visits3: <span>{Math.floor(index * 100)}</span>,
activity3: Math.floor(index * 100),
age4: <span>{Math.floor(index * 30)}</span>,
visits4: <span>{Math.floor(index * 100)}</span>,
activity4: Math.floor(index * 100),
age5: <span>{Math.floor(index * 30)}</span>,
visits5: <span>{Math.floor(index * 100)}</span>,
activity5: Math.floor(index * 100),
};
});
}, []);
const data = React.useMemo(() => makeData(40), [makeData]);
return (
<div className="border border-beerus rounded-lg overflow-hidden">
<Table
columns={columns}
data={data}
width={800}
height={400}
withMinimap
/>
</div>
);
};
export default Example;
A table with sorting data
An example of a table with data that can be sorted.
First Name | Last Name | Age | Visits | Progress | Status | Activity |
|---|---|---|---|---|---|---|
| Lisa | Brown | 96 | 8 | 2 | 97 | 23 |
| John | Dobbins | 52 | 25 | 25 | 97 | 35 |
| Tanya | Fox | 63 | 82 | 59 | 52 | 46 |
| Clara | Harrison | 53 | 63 | 24 | 48 | 3 |
| Burt | Henson | 4 | 653 | 36 | 44 | 43 |
| Emma | Herbert | 49 | 45 | 454 | 35 | 4 |
| Megan | Lewis | 55 | 54 | 24 | 56 | 33 |
| Jacklyn | Perkins | 74 | 5 | 1 | 86 | 2 |
| Elroy | Rogers | 12 | 4 | 44 | 98 | 15 |
| Magdalena | Smith | 36 | 50 | 20 | 19 | 54 |
| John | Watts | 89 | 98 | 54 | 24 | 43 |
| Bart | Woods | 64 | 35 | 78 | 65 | 5 |
"use client";
import { mergeClassnames } from "@heathmont/moon-core-tw";
import { ArrowsSorting } from "@heathmont/moon-icons-tw";
import { Table } from "@heathmont/moon-table-v8-tw/lib/es";
import { ColumnDef, Header, SortingState } from "@tanstack/react-table";
import React from "react";
type DataTypeHelper = {
firstName: string;
lastName: string;
age: number;
visits: number;
progress: number;
status: number;
activity: number;
};
const headerCell = (header: Header<{}, DataTypeHelper>, cellLabel: string) => {
return (
<div
className={mergeClassnames(
"flex gap-x-1 items-center",
header.column.getCanSort() ? "cursor-pointer select-none" : "",
)}
onClick={header.column.getToggleSortingHandler()}
>
{cellLabel}
{{
asc: <ArrowsSorting className="min-w-[20px] min-h-[20px]" />,
desc: <ArrowsSorting className="min-w-[20px] min-h-[20px]" />,
}[header.column.getIsSorted() as string] ?? null}
</div>
);
};
const preset: SortingState = [
{
id: "last_name",
desc: false,
},
];
const Example = () => {
const makeData = React.useMemo(
() => [
{
firstName: "Magdalena",
lastName: "Smith",
age: 36,
visits: 50,
progress: 20,
status: 19,
activity: 54,
},
{
firstName: "Lisa",
lastName: "Brown",
age: 96,
visits: 8,
progress: 2,
status: 97,
activity: 23,
},
{
firstName: "Tanya",
lastName: "Fox",
age: 63,
visits: 82,
progress: 59,
status: 52,
activity: 46,
},
{
firstName: "Bart",
lastName: "Woods",
age: 64,
visits: 35,
progress: 78,
status: 65,
activity: 5,
},
{
firstName: "Elroy",
lastName: "Rogers",
age: 12,
visits: 4,
progress: 44,
status: 98,
activity: 15,
},
{
firstName: "Jacklyn",
lastName: "Perkins",
age: 74,
visits: 5,
progress: 1,
status: 86,
activity: 2,
},
{
firstName: "John",
lastName: "Watts",
age: 89,
visits: 98,
progress: 54,
status: 24,
activity: 43,
},
{
firstName: "John",
lastName: "Dobbins",
age: 52,
visits: 25,
progress: 25,
status: 97,
activity: 35,
},
{
firstName: "Megan",
lastName: "Lewis",
age: 55,
visits: 54,
progress: 24,
status: 56,
activity: 33,
},
{
firstName: "Clara",
lastName: "Harrison",
age: 53,
visits: 63,
progress: 24,
status: 48,
activity: 3,
},
{
firstName: "Burt",
lastName: "Henson",
age: 4,
visits: 653,
progress: 36,
status: 44,
activity: 43,
},
{
firstName: "Emma",
lastName: "Herbert",
age: 49,
visits: 45,
progress: 454,
status: 35,
activity: 4,
},
],
[],
);
const [data, setData] = React.useState(makeData);
const [sorting, setSorting] = React.useState<SortingState>(preset);
const columns = React.useMemo<ColumnDef<{}, DataTypeHelper>[]>(
() => [
{
id: "first_name",
header: ({ header }) => headerCell(header, "First Name"),
accessorKey: "firstName",
},
{
id: "last_name",
header: ({ header }) => headerCell(header, "Last Name"),
accessorKey: "lastName",
},
{
id: "age",
header: ({ header }) => headerCell(header, "Age"),
accessorKey: "age",
},
{
id: "visits",
header: ({ header }) => headerCell(header, "Visits"),
accessorKey: "visits",
},
{
id: "progress",
header: ({ header }) => headerCell(header, "Progress"),
accessorKey: "progress",
},
{
id: "status",
header: ({ header }) => headerCell(header, "Status"),
accessorKey: "status",
},
{
id: "activity",
header: ({ header }) => headerCell(header, "Activity"),
accessorKey: "activity",
},
],
[],
);
return (
<div className="border border-beerus rounded-lg overflow-hidden">
<Table
columns={columns}
data={data}
width={800}
state={{ sorting }}
onSortingChange={setSorting}
/>
</div>
);
};
export default Example;
Resizable tables
Examples with different table layouts: auto (default), stretched-auto and fixed (with fixedWidth = "w-max").
First Name | Last Name | Age | Visits | Progress | Activity | Status |
|---|---|---|---|---|---|---|
| Test | Test | 0 | 0 | 0 | 0 | 0 |
| Test | Test | 30 | 100 | 100 | 100 | 100 |
First Name | Last Name | Age | Visits | Progress | Activity | Status |
|---|---|---|---|---|---|---|
| Test | Test | 0 | 0 | 0 | 0 | 0 |
| Test | Test | 30 | 100 | 100 | 100 | 100 |
First Name | Last Name | Age | Visits | Progress | Activity | Status |
|---|---|---|---|---|---|---|
| Test | Test | 0 | 0 | 0 | 0 | 0 |
| Test | Test | 30 | 100 | 100 | 100 | 100 |
"use client";
import React, { useCallback } from "react";
import Table from "@heathmont/moon-table-v8-tw/lib/es/components/Table";
import { ColumnDef } from "@tanstack/react-table";
type DefaultHelper = {
firstName: string;
lastName: string;
age: string;
visits: string;
progress: string;
status: number;
activity: number;
};
const Example = () => {
const makeData = useCallback((length: number) => {
return Array.from("_".repeat(length)).map((_, index) => {
return {
firstName: "Test",
lastName: "Test",
age: <span>{Math.floor(index * 30)}</span>,
visits: <span>{Math.floor(index * 100)}</span>,
progress: <span>{Math.floor(index * 100)}</span>,
status: Math.floor(index * 100),
activity: Math.floor(index * 100),
};
});
}, []);
const columns = React.useMemo<ColumnDef<{}, DefaultHelper>[]>(
() => [
{
id: "firstName",
header: () => "First Name",
accessorKey: "firstName",
},
{
id: "lastName",
header: () => "Last Name",
accessorKey: "lastName",
},
{
id: "age",
header: () => "Age",
accessorKey: "age",
cell: (props) => props.getValue(),
},
{
id: "visits",
header: () => "Visits",
accessorKey: "visits",
cell: (props) => props.getValue(),
},
{
id: "progress",
header: () => "Progress",
accessorKey: "progress",
cell: (props) => props.getValue(),
},
{
id: "activity",
header: () => "Activity",
accessorKey: "activity",
},
{
id: "status",
header: () => "Status",
accessorKey: "status",
},
],
[],
);
const data = React.useMemo(() => makeData(2), [makeData]);
const defaultColumn = {
size: 120,
};
return (
<div className="flex flex-col gap-y-2 overflow-hidden">
<div className="w-full border border-beerus rounded-lg overflow-hidden bg-gohan">
<Table
columns={columns}
data={data}
defaultColumn={defaultColumn}
width={800}
isResizable
/>
</div>
<div className="w-full border border-beerus rounded-lg overflow-hidden bg-gohan">
<Table
columns={columns}
data={data}
defaultColumn={defaultColumn}
width={800}
layout="stretched-auto"
isResizable
/>
</div>
<div className="w-full border border-beerus rounded-lg overflow-hidden bg-gohan">
<Table
columns={columns}
data={data}
defaultColumn={defaultColumn}
width={800}
layout="fixed"
fixedWidth="w-max"
isResizable
/>
</div>
</div>
);
};
export default Example;
Long data resizable table
An example of a wide table with clipped data.
Use the mouse wheel or the arrow keys on the keyboard to scroll the data up and down.
Also use the right and left keyboard keys to scroll the columns of the table horizontally.
Transactions | Info | Status | |||||
|---|---|---|---|---|---|---|---|
Transaction UUID | User & Supplier user | Process time | Client | Game name & provider | Amount | Currency | Status |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546 | 2023-09-19T14:31:46.105Z | Bender (old) Coin Gaming | Pragmatic Play | 22.97 | USD | SUCCESS | |
Transaction UUID | User & Supplier user | Process time | Client | Game name & provider | Amount | Currency | Status |
Transactions | Info | Status | |||||
"use client";
import { Tag } from "@heathmont/moon-core-tw";
import Table from "@heathmont/moon-table-v8-tw/lib/es/components/Table";
import ClipProps from "@heathmont/moon-table-v8-tw/lib/es/private/types/ClipProps";
import { ColumnDef } from "@tanstack/react-table";
import React, { useCallback } from "react";
type DataTypeHelper = {
uuid: string;
user: string;
processTime: string;
client: string;
gameNameAndProvider: string;
amount: number;
currency: React.JSX.Element;
status: React.JSX.Element;
};
const Example = () => {
const columns = React.useMemo<ColumnDef<{}, DataTypeHelper>[]>(
() => [
{
id: "operation",
header: () => "Transactions",
footer: () => "Transactions",
sticky: "left",
size: 180,
minSize: 180,
columns: [
{
header: () => "Transaction UUID",
footer: () => "Transaction UUID",
accessorKey: "uuid",
size: 110,
},
{
header: () => "User & Supplier user",
footer: () => "User & Supplier user",
accessorKey: "user",
size: 70,
},
],
},
{
id: "info",
header: () => "Info",
footer: () => "Info",
columns: [
{
header: () => "Process time",
accessorKey: "processTime",
footer: () => "Process time",
},
{
header: () => "Client",
accessorKey: "client",
footer: () => "Client",
},
{
header: () => "Game name & provider",
accessorKey: "gameNameAndProvider",
footer: () => "Game name & provider",
},
{
header: () => "Amount",
accessorKey: "amount",
footer: () => "Amount",
},
{
header: () => "Currency",
footer: () => "Currency",
accessorKey: "currency",
cell: (props) => props.getValue(),
},
],
},
{
id: "status",
header: () => "Status",
footer: () => "Status",
sticky: "right",
size: 90,
columns: [
{
header: () => "Status",
footer: () => "Status",
accessorKey: "status",
cell: (props) => props.getValue(),
size: 90,
minSize: 90,
},
],
},
],
[],
);
const currency = React.useMemo(
() => (
<Tag className="bg-gray-100 text-lg text-gray-600 max-w-fit">USD</Tag>
),
[],
);
const success = React.useMemo(
() => (
<Tag className="bg-roshi-10 text-lg text-roshi max-w-fit">SUCCESS</Tag>
),
[],
);
const defaultColumn = {
minSize: 50,
size: 50,
maxSize: Number.MAX_SAFE_INTEGER,
};
const makeData = useCallback(
(length: number) => {
return Array.from("_".repeat(length)).map((_) => {
return {
uuid: "84837d8ac654aa4689efa4649-84837d8ac654aa4689efa4649756454a5646545546d54f6546f546",
user: "[email protected]",
processTime: "2023-09-19T14:31:46.105Z",
client: "Bender (old) Coin Gaming",
gameNameAndProvider: "Pragmatic Play",
amount: 22.97,
currency: currency,
status: success,
};
});
},
[currency, success],
);
const data = React.useMemo(() => makeData(40), [makeData]);
const textClip = "clip" as ClipProps;
return (
<div className="border border-beerus rounded-lg overflow-hidden">
<Table
columns={columns}
data={data}
defaultColumn={defaultColumn}
width={800}
height={500}
isResizable
textClip={textClip}
withCellBorder="sticky"
withFooter
/>
</div>
);
};
export default Example;
Extra long data resizable table
An example of a table with clipped extra-long data, which can be both text and html structure.
Use the mouse wheel or the arrow keys on the keyboard to scroll the data up and down.
Also use the right and left keyboard keys to scroll through the clipped data in the "Deals" cells.
Location | Deals | Amount | Currency | Date range | Actions |
|---|---|---|---|---|---|
| Lithuania | 22.97 | USD | |||
| AMD | 22.97 | USD | |||
| Europe | 10.0(10000-20000)|9.0(20000-30000)|8.0(30000-40000)|7.0(40000-50000)|6.0(50000-60000) | 22.97 | USD | ||
| Europe | 5.0(2-3) | 22.97 | USD | ||
| Europe | 0.0(0-) | 22.97 | USD | ||
| Asia | 6.0(3-4) | 22.97 | USD | ||
| Asia | 5.0(0-150000)|4.0(150000-500000) | 22.97 | USD | ||
"use client";
import { Chip, Tag, Tooltip } from "@heathmont/moon-core-tw";
import {
Other3DotsHorizontal,
TimeCalendarDate,
} from "@heathmont/moon-icons-tw";
import { CellScroller, Table } from "@heathmont/moon-table-v8-tw/lib/es";
import { ColumnDef } from "@tanstack/react-table";
import React from "react";
type DataTypeHelper = {
location: string;
deals: React.JSX.Element | string;
range: React.JSX.Element | string;
amount: number;
currency: React.JSX.Element;
actions: React.JSX.Element;
};
const Example = () => {
const columns = React.useMemo<ColumnDef<{}, DataTypeHelper>[]>(
() => [
{
id: "leftSticky",
header: () => "",
sticky: "left",
columns: [
{
id: "location",
header: () => "Location",
accessorKey: "location",
size: 100,
},
],
},
{
id: "data",
header: () => "",
columns: [
{
id: "deals",
header: () => "Deals",
accessorKey: "deals",
cell: (props) => props.getValue(),
size: 150,
},
{
id: "amount",
header: () => "Amount",
accessorKey: "amount",
},
{
id: "currency",
header: () => "Currency",
accessorKey: "currency",
cell: (props) => props.getValue(),
},
{
id: "range",
header: () => "Date range",
accessorKey: "range",
cell: (props) => props.getValue(),
size: 190,
minSize: 190,
},
],
},
{
id: "rightSticky",
header: () => "",
sticky: "right",
size: 70,
columns: [
{
id: "actions",
header: () => "Actions",
accessorKey: "actions",
cell: (props) => props.getValue(),
size: 70,
},
],
},
],
[],
);
const currency = React.useMemo(
() => (
<Tag className="bg-gray-100 text-lg text-gray-600 max-w-fit">USD</Tag>
),
[],
);
const tooltip = React.useMemo(
() => (
<Tooltip>
<Tooltip.Trigger className="max-h-6">
<Chip
variant="default"
iconOnly={<Other3DotsHorizontal className="text-moon-24 max-h-6" />}
/>
</Tooltip.Trigger>
<Tooltip.Content position="top-start" className="z-[2]">
Any activity
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip>
),
[],
);
const rearrangeData = React.useCallback(
(data: { [key: string]: { start?: string; end?: string } }[]) => {
const deals = data.map((value, index, src) => {
const [key, range] = Object.entries(value)[0];
return (
<>
<span className="me-[5px]">{key}</span>
<span>({range.start ? range.start : ""}</span>
<span>-</span>
<span>{range.end ? range.end : ""})</span>
{index < src.length - 1 && <span className="mx-2">|</span>}
</>
);
});
return deals;
},
[],
);
const data = React.useMemo(
() => [
{
location: "Lithuania",
deals: "",
range: (
<Chip
size="sm"
className="bg-transparent"
iconLeft={<TimeCalendarDate className="text-moon-24" />}
>
23.10.01 - 23.10.31
</Chip>
),
amount: 22.97,
currency: currency,
actions: tooltip,
},
{
location: "AMD",
deals: "",
range: (
<Chip
size="sm"
className="bg-transparent"
iconLeft={<TimeCalendarDate className="text-moon-24" />}
>
23.10.01 - 23.10.31
</Chip>
),
amount: 22.97,
currency: currency,
actions: tooltip,
},
{
location: "Europe",
deals: (
<CellScroller
className="max-w-[260px]"
data={rearrangeData([
{ "10.0": { start: "10000", end: "20000" } },
{ "9.0": { start: "20000", end: "30000" } },
{ "8.0": { start: "30000", end: "40000" } },
{ "7.0": { start: "40000", end: "50000" } },
{ "6.0": { start: "50000", end: "60000" } },
])}
></CellScroller>
),
range: (
<Chip
size="sm"
className="bg-transparent"
iconLeft={<TimeCalendarDate className="text-moon-24" />}
>
23.10.01 - 23.10.31
</Chip>
),
amount: 22.97,
currency: currency,
actions: tooltip,
},
{
location: "Europe",
deals: (
<CellScroller
data={rearrangeData([{ "5.0": { start: "2", end: "3" } }])}
></CellScroller>
),
range: (
<Chip
size="sm"
className="bg-transparent"
iconLeft={<TimeCalendarDate className="text-moon-24" />}
>
23.12.01 -
</Chip>
),
amount: 22.97,
currency: currency,
actions: tooltip,
},
{
location: "Europe",
deals: (
<CellScroller
data={rearrangeData([{ "0.0": { start: "0" } }])}
></CellScroller>
),
range: (
<Chip
size="sm"
className="bg-transparent"
iconLeft={<TimeCalendarDate className="text-moon-24" />}
>
23.11.01 - 23.11.30
</Chip>
),
amount: 22.97,
currency: currency,
actions: tooltip,
},
{
location: "Asia",
deals: (
<CellScroller
data={rearrangeData([{ "6.0": { start: "3", end: "4" } }])}
></CellScroller>
),
range: (
<Chip
size="sm"
className="bg-transparent"
iconLeft={<TimeCalendarDate className="text-moon-24" />}
>
23.11.01 -
</Chip>
),
amount: 22.97,
currency: currency,
actions: tooltip,
},
{
location: "Asia",
deals: (
<CellScroller
className="max-w-[260px]"
data={rearrangeData([
{ "5.0": { start: "0", end: "150000" } },
{ "4.0": { start: "150000", end: "500000" } },
])}
></CellScroller>
),
range: (
<Chip
size="sm"
className="bg-transparent"
iconLeft={<TimeCalendarDate className="text-moon-24" />}
>
23.05.01 - 23.10.31
</Chip>
),
amount: 22.97,
currency: currency,
actions: tooltip,
},
],
[rearrangeData, currency, tooltip],
);
const defaultColumn = {
minSize: 70,
size: 50,
maxSize: Number.MAX_SAFE_INTEGER,
};
return (
<div className="border border-beerus rounded-lg overflow-hidden">
<Table
columns={columns}
data={data}
defaultColumn={defaultColumn}
width={800}
height={400}
isResizable
withCellBorder="sticky"
/>
</div>
);
};
export default Example;
Table
These are props specific to the Table component:
Name | Type | Default |
|---|---|---|
bodyBackgroundColor | string | gohan |
columns* | "ColumnDef<TData, any>[]" | - |
data* | "TData[]" | - |
defaultColumn | "Partial<ColumnDef<TData, any>>" | - |
defaultRowBackgroundColor | string | goku |
evenRowBackgroundColor | string | goku |
fixedWidth | string | number | - |
getSubRows | (originalRow: TData, index: number) => TData[] | undefined | - |
headerBackgroundColor | string | gohan |
height | string | number | - |
isResizable | boolean | false |
isSelectable | boolean | false |
isSticky | boolean | true |
layout | "auto" | "stretched-auto" | "fixed" | auto |
onExpandedChange | "OnChangeFn<ExpandedState>" | - |
onRowSelectionChange | "OnChangeFn<RowSelectionState>" | - |
preventSelectionByRowClick | boolean | false |
rowGap | string | 2px |
rowActiveColor | string | - |
rowHoverColor | string | - |
rowSelectColor | string | heles |
rowSize | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | md |
state | "Partial<TableState>" | - |
textClip | "clip" | "break" | - |
width | string | number | - |
withCellBorder | boolean | "sticky" | false |
withFooter | boolean | false |
withMinimap | boolean | false |
Properties indicated with * are required.