109 lines
3.1 KiB
TypeScript
109 lines
3.1 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
flexRender,
|
|
getCoreRowModel,
|
|
getPaginationRowModel,
|
|
useReactTable,
|
|
} from "@tanstack/react-table"
|
|
import { useState } from "react"
|
|
|
|
import Table from "@scandic-hotels/design-system/Table"
|
|
|
|
import { Section } from "@/components/Section"
|
|
import SectionHeader from "@/components/Section/Header/Deprecated"
|
|
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
|
|
|
|
import styles from "./table.module.css"
|
|
|
|
import type { TableBlockProps } from "@/types/components/blocks/table"
|
|
|
|
export default function TableBlock({ data }: TableBlockProps) {
|
|
const { columns, rows, totalWidth, heading, preamble } = data
|
|
const initialPageSize = 5
|
|
const [pageSize, setPageSize] = useState(initialPageSize)
|
|
const showMoreVisible = rows.length > initialPageSize
|
|
const showLessVisible = pageSize >= rows.length
|
|
const columnDefs = columns.map((col) => ({
|
|
accessorKey: col.id,
|
|
header: col.header,
|
|
size: col.width,
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
cell: (info: any) => (
|
|
<div dangerouslySetInnerHTML={{ __html: info.getValue() }} />
|
|
),
|
|
}))
|
|
const hasHeader = columns.some((col) => col.header)
|
|
|
|
const table = useReactTable({
|
|
columns: columnDefs,
|
|
data: rows,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
getPaginationRowModel: getPaginationRowModel(),
|
|
state: {
|
|
pagination: {
|
|
pageIndex: 0,
|
|
pageSize,
|
|
},
|
|
},
|
|
})
|
|
|
|
function handleShowMore() {
|
|
setPageSize(showLessVisible ? initialPageSize : rows.length)
|
|
}
|
|
|
|
return (
|
|
<Section>
|
|
<SectionHeader preamble={preamble} title={heading} />
|
|
<div className={styles.tableWrapper}>
|
|
<Table
|
|
width={`${totalWidth}%`}
|
|
variant="content"
|
|
intent="striped"
|
|
layout="fixed"
|
|
borderRadius="none"
|
|
>
|
|
{hasHeader ? (
|
|
<Table.THead>
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<Table.TR key={headerGroup.id}>
|
|
{headerGroup.headers.map((header) => (
|
|
<Table.TH
|
|
key={header.id}
|
|
width={`${header.column.columnDef.size}%`}
|
|
>
|
|
{flexRender(
|
|
header.column.columnDef.header,
|
|
header.getContext()
|
|
)}
|
|
</Table.TH>
|
|
))}
|
|
</Table.TR>
|
|
))}
|
|
</Table.THead>
|
|
) : null}
|
|
|
|
<Table.TBody>
|
|
{table.getRowModel().rows.map((row) => (
|
|
<Table.TR key={row.id}>
|
|
{row.getVisibleCells().map((cell) => (
|
|
<Table.TD key={cell.id}>
|
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
</Table.TD>
|
|
))}
|
|
</Table.TR>
|
|
))}
|
|
</Table.TBody>
|
|
</Table>
|
|
{showMoreVisible ? (
|
|
<ShowMoreButton
|
|
loadMoreData={handleShowMore}
|
|
showLess={showLessVisible}
|
|
buttonIntent="table"
|
|
/>
|
|
) : null}
|
|
</div>
|
|
</Section>
|
|
)
|
|
}
|