scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-216): Added heading and preamble text to table block

Browse Source
This commit is contained in:
Erik Tiekstra
2024-10-08 11:06:33 +02:00
committed by Pontus Dreij
parent 5c10d36745
commit 23953aeb61
5 changed files with 67 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
components/Blocks/Table/index.tsx
View File

@@ -8,6 +8,8 @@ import {
} from "@tanstack/react-table"
import { useState } from "react"
import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import ScrollWrapper from "@/components/TempDesignSystem/ScrollWrapper"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import Table from "@/components/TempDesignSystem/Table"
@@ -17,7 +19,7 @@ import styles from "./table.module.css"
import type { TableBlockProps } from "@/types/components/blocks/table"
export default function TableBlock({ data }: TableBlockProps) {
const { columns, rows, totalWidth } = data
const { columns, rows, totalWidth, heading, preamble } = data
const initialPageSize = 5
const [pageSize, setPageSize] = useState(initialPageSize)
const showMoreVisible = rows.length > initialPageSize
@@ -46,52 +48,60 @@ export default function TableBlock({ data }: TableBlockProps) {
}
return (
<div className={styles.tableWrapper}>
<ScrollWrapper>
<Table
width={`${totalWidth}%`}
variant="content"
intent="striped"
layout="fixed"
borderRadius="none"
>
<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>
<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>
</ScrollWrapper>
{showMoreVisible ? (
<ShowMoreButton
loadMoreData={handleShowMore}
showLess={showLessVisible}
intent="table"
/>
<SectionContainer>
{heading ? (
<SectionHeader preamble={data.preamble} title={heading} />
) : null}
</div>
<div className={styles.tableWrapper}>
<ScrollWrapper>
<Table
width={`${totalWidth}%`}
variant="content"
intent="striped"
layout="fixed"
borderRadius="none"
>
<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>
<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>
</ScrollWrapper>
{showMoreVisible ? (
<ShowMoreButton
loadMoreData={handleShowMore}
showLess={showLessVisible}
intent="table"
/>
) : null}
</div>
</SectionContainer>
)
}