web/apps/scandic-web/components/Blocks/Table/index.tsx

"use client"

import {
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  useReactTable,
} from "@tanstack/react-table"
import { useState } from "react"

import Table from "@scandic-hotels/design-system/Table"

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 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,
    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 (
    <SectionContainer>
      <SectionHeader preamble={preamble} title={heading} />
      <div className={styles.tableWrapper}>
        <ScrollWrapper>
          <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>
        </ScrollWrapper>
        {showMoreVisible ? (
          <ShowMoreButton
            loadMoreData={handleShowMore}
            showLess={showLessVisible}
            buttonIntent="table"
          />
        ) : null}
      </div>
    </SectionContainer>
  )
}