feat(SW-441): Added table block component

components/Blocks/Table/index.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import {
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { useState } from "react"
+
+import ScrollWrapper from "@/components/TempDesignSystem/ScrollWrapper"
+import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
+import Table from "@/components/TempDesignSystem/Table"
+
+import styles from "./table.module.css"
+
+import type { TableProps } from "@/types/components/blocks/table"
+
+export default function TableBlock({ data }: TableProps) {
+  const { columns, rows, totalWidth } = 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,
+  }))
+
+  const table = useReactTable({
+    columns: columnDefs,
+    data: rows,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    state: {
+      pagination: {
+        pageIndex: 0,
+        pageSize,
+      },
+    },
+  })
+
+  function handleShowMore() {
+    setPageSize(showLessVisible ? initialPageSize : rows.length)
+  }
+
+  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"
+        />
+      ) : null}
+    </div>
+  )
+}

components/Blocks/Table/table.module.css

@@ -0,0 +1,6 @@
+.tableWrapper {
+  display: grid;
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Small);
+  overflow: hidden;
+}

components/Blocks/index.tsx

@@ -5,7 +5,7 @@ import TextCols from "@/components/Blocks/TextCols"
 import UspGrid from "@/components/Blocks/UspGrid"
 import JsonToHtml from "@/components/JsonToHtml"
 
-import Table from "../Table"
+import Table from "./Table"
 
 import type { BlocksProps } from "@/types/components/blocks"
 import { BlocksEnums } from "@/types/enums/blocks"
@@ -50,7 +50,7 @@ export default function Blocks({ blocks }: BlocksProps) {
           />
         )
       case BlocksEnums.block.Table:
-        return <Table columns={block.table.columns} rows={block.table.rows} />
+        return <Table data={block.table} />
       case BlocksEnums.block.TextCols:
         return <TextCols text_cols={block.text_cols} />
       case BlocksEnums.block.TextContent: