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

components/Blocks/Table/index.tsx

@@ -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}>
+    <SectionContainer>
-      <ScrollWrapper>
+      {heading ? (
-        <Table
+        <SectionHeader preamble={data.preamble} title={heading} />
-          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>
+      <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>
   )
 }

components/TempDesignSystem/ScrollWrapper/index.tsx

@@ -4,10 +4,10 @@ import { useMemo } from "react"
 
 import useScrollShadows from "@/hooks/useScrollShadows"
 
-import { ScrollWrapperProps } from "./scrollWrapper"
-
 import styles from "./scrollWrapper.module.css"
 
+import type { ScrollWrapperProps } from "./scrollWrapper"
+
 export default function ScrollWrapper({
   className,
   children,

components/TempDesignSystem/Table/index.tsx

@@ -1,4 +1,3 @@
-import { TableProps } from "./table"
 import TBody from "./TBody"
 import TD from "./TD"
 import TH from "./TH"
@@ -6,6 +5,8 @@ import THead from "./THead"
 import TR from "./TR"
 import { tableVariants } from "./variants"
 
+import type { TableProps } from "./table"
+
 function Table({
   className,
   intent,

lib/graphql/Fragments/Blocks/Table.graphql

@@ -1,6 +1,8 @@
 fragment Table_ContentPage on ContentPageBlocksTable {
   __typename
   table {
+    heading
+    preamble
     column_widths
     table
   }

server/routers/contentstack/schemas/blocks/table.ts

@@ -9,6 +9,8 @@ export const tableSchema = z.object({
     .default(BlocksEnums.block.Table),
   table: z
     .object({
+      heading: z.string().optional(),
+      preamble: z.string().optional().default(""),
       column_widths: z.array(z.number()),
       table: z.object({
         tableState: z.object({
@@ -46,6 +48,8 @@ export const tableSchema = z.object({
       )
 
       return {
+        heading: data.heading,
+        preamble: data.preamble,
         columns,
         rows,
         totalWidth,