Create HeaderRow component for table header row

Author: phen0menon

src/HeaderRow.test.tsx

@@ -0,0 +1,24 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from "react";
+import { render } from "@testing-library/react";
+import HeaderRow from "./HeaderRow";
+
+describe("<HeaderRow />", () => {
+  test("renders", () => {
+    render(<HeaderRow />);
+    const row = document.querySelector("tr");
+    expect(row).not.toBeNull();
+  });
+  test("renders with children", () => {
+    render(
+      <HeaderRow>
+        <th></th>
+      </HeaderRow>
+    );
+    const cell = document.querySelector("tr th");
+    expect(cell).not.toBeNull();
+  });
+});

src/HeaderRow.tsx

@@ -0,0 +1,6 @@
+import * as React from "react";
+import * as Types from "./types";
+
+const HeaderRow: Types.HeaderRowComponent = (props) => <tr {...props} />;
+
+export default HeaderRow;

src/Row.test.tsx

@@ -8,13 +8,13 @@ import Row from "./Row";
 
 describe("<Row />", () => {
   test("renders", () => {
-    render(<Row />);
+    render(<Row row={0} />);
     const row = document.querySelector("tr");
     expect(row).not.toBeNull();
   });
   test("renders with children", () => {
     render(
-      <Row>
+      <Row row={1}>
         <td></td>
       </Row>
     );

src/Spreadsheet.tsx

@@ -10,6 +10,7 @@ import { Parser as FormulaParser } from "hot-formula-parser";
 
 import DefaultTable from "./Table";
 import DefaultRow from "./Row";
+import DefaultHeaderRow from "./HeaderRow";
 import DefaultCornerIndicator from "./CornerIndicator";
 import DefaultColumnIndicator from "./ColumnIndicator";
 import DefaultRowIndicator from "./RowIndicator";
@@ -78,6 +79,8 @@ export type Props<CellType extends Types.CellBase> = {
   Table?: Types.TableComponent;
   /** The Spreadsheet's row component. */
   Row?: Types.RowComponent;
+  /** The spreadsheet's header row component */
+  HeaderRow?: Types.HeaderRowComponent;
   /** The Spreadsheet's cell component. */
   Cell?: Types.CellComponent<CellType>;
   /** Component rendered for cells in view mode. */
@@ -124,6 +127,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     onKeyDown,
     Table = DefaultTable,
     Row = DefaultRow,
+    HeaderRow = DefaultHeaderRow,
     CornerIndicator = DefaultCornerIndicator,
     DataEditor = DefaultDataEditor,
     DataViewer = DefaultDataViewer,
@@ -397,7 +401,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
   const tableNode = React.useMemo(
     () => (
       <Table columns={size.columns} hideColumnIndicators={hideColumnIndicators}>
-        <Row>
+        <HeaderRow>
           {!hideRowIndicators && !hideColumnIndicators && <CornerIndicator />}
           {!hideColumnIndicators &&
             range(size.columns).map((columnNumber) =>
@@ -415,9 +419,9 @@ const Spreadsheet = <CellType extends Types.CellBase>(
                 <ColumnIndicator key={columnNumber} column={columnNumber} />
               )
             )}
-        </Row>
+        </HeaderRow>
         {range(size.rows).map((rowNumber) => (
-          <Row key={rowNumber}>
+          <Row key={rowNumber} row={rowNumber}>
             {!hideRowIndicators &&
               (rowLabels ? (
                 <RowIndicator
@@ -448,6 +452,7 @@ const Spreadsheet = <CellType extends Types.CellBase>(
       size.columns,
       hideColumnIndicators,
       Row,
+      HeaderRow,
       hideRowIndicators,
       CornerIndicator,
       columnLabels,

src/types.ts

@@ -149,11 +149,20 @@ export type TableProps = React.PropsWithChildren<{
 export type TableComponent = React.ComponentType<TableProps>;
 
 /** Type of the Spreadsheet Row component props */
-export type RowProps = React.PropsWithChildren<{}>;
+export type RowProps = React.PropsWithChildren<{
+  /** The row index of the table */
+  row: number;
+}>;
 
 /** Type of the Row component */
 export type RowComponent = React.ComponentType<RowProps>;
 
+/** Type of the Spreadsheet HeaderRow component props */
+export type HeaderRowProps = React.PropsWithChildren<{}>;
+
+/** Type of the HeaderRow component */
+export type HeaderRowComponent = React.ComponentType<HeaderRowProps>;
+
 /** Type of the Spreadsheet RowIndicator component props */
 export type RowIndicatorProps = {
   /** The row the indicator indicates */