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,6 +48,10 @@ export default function TableBlock({ data }: TableBlockProps) {
   }
 
   return (
+    <SectionContainer>
+      {heading ? (
+        <SectionHeader preamble={data.preamble} title={heading} />
+      ) : null}
       <div className={styles.tableWrapper}>
         <ScrollWrapper>
           <Table
@@ -77,7 +83,10 @@ export default function TableBlock({ data }: TableBlockProps) {
                 <Table.TR key={row.id}>
                   {row.getVisibleCells().map((cell) => (
                     <Table.TD key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
                     </Table.TD>
                   ))}
                 </Table.TR>
@@ -93,5 +102,6 @@ export default function TableBlock({ data }: TableBlockProps) {
           />
         ) : 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,