Headers (ColTitles, RowTitles) and varying CellWidths

Author: sloorush

src/components/NuGrid/NuGrid.css

@@ -35,6 +35,30 @@
   font-size: 13px;
 }
 
+/* Header styles */
+.nugrid-header-row {
+  background-color: #f5f5f5;
+}
+
+.nugrid-col-header,
+.nugrid-row-header {
+  border: 1px solid #ccc;
+  padding: 4px 8px;
+  font-weight: 600;
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 13px;
+  background-color: #f5f5f5;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nugrid-corner-cell {
+  border: 1px solid #ccc;
+  background-color: #f5f5f5;
+}
+
 .nugrid-empty {
   display: flex;
   align-items: center;

src/components/NuGrid/index.jsx

@@ -15,9 +15,31 @@ const NuGrid = ({ data }) => {
     Visible,
     Posn,
     Values,
+    ColTitles,
+    RowTitles,
+    TitleWidth = 50,
+    TitleHeight = 24,
+    CellWidths = 100,
+    CellHeights = 24,
     CSS,
   } = data?.Properties || {};
 
+  // Helper to get width for a column (scalar or per-column array)
+  const getCellWidth = (colIndex) => {
+    if (Array.isArray(CellWidths)) {
+      return CellWidths[colIndex] ?? CellWidths[0] ?? 100;
+    }
+    return CellWidths || 100;
+  };
+
+  // Helper to get height for a row (scalar or per-row array)
+  const getCellHeight = (rowIndex) => {
+    if (Array.isArray(CellHeights)) {
+      return CellHeights[rowIndex] ?? CellHeights[0] ?? 24;
+    }
+    return CellHeights || 24;
+  };
+
   const customStyles = parseFlexStyles(CSS);
   const baseStyles = setStyle(data?.Properties);
 
@@ -32,6 +54,12 @@ const NuGrid = ({ data }) => {
     ...customStyles,
   };
 
+  // Normalize titles to arrays
+  const colTitlesArray = ColTitles ? (Array.isArray(ColTitles) ? ColTitles : [ColTitles]) : [];
+  const rowTitlesArray = RowTitles ? (Array.isArray(RowTitles) ? RowTitles : [RowTitles]) : [];
+  const hasColTitles = colTitlesArray.length > 0;
+  const hasRowTitles = rowTitlesArray.length > 0;
+
   return (
     <div
       id={data?.ID}
@@ -41,21 +69,52 @@ const NuGrid = ({ data }) => {
       <div className="nugrid-container">
         {Values && Values.length > 0 ? (
           <table className="nugrid-table">
+            {hasColTitles && (
+              <thead>
+                <tr className="nugrid-header-row" style={{ height: TitleHeight }}>
+                  {hasRowTitles && (
+                    <th
+                      className="nugrid-corner-cell"
+                      style={{ width: TitleWidth, height: TitleHeight }}
+                    />
+                  )}
+                  {colTitlesArray.map((title, colIndex) => (
+                    <th
+                      key={colIndex}
+                      className="nugrid-col-header"
+                      style={{ width: getCellWidth(colIndex), height: TitleHeight }}
+                    >
+                      {title !== null && title !== undefined ? String(title) : ''}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+            )}
             <tbody>
               {Values.map((row, rowIndex) => (
-                <tr key={rowIndex} className="nugrid-row">
+                <tr key={rowIndex} className="nugrid-row" style={{ height: getCellHeight(rowIndex) }}>
+                  {hasRowTitles && (
+                    <th
+                      className="nugrid-row-header"
+                      style={{ width: TitleWidth, height: getCellHeight(rowIndex) }}
+                    >
+                      {rowTitlesArray[rowIndex] !== null && rowTitlesArray[rowIndex] !== undefined
+                        ? String(rowTitlesArray[rowIndex])
+                        : ''}
+                    </th>
+                  )}
                   {Array.isArray(row) ? (
                     row.map((cell, colIndex) => (
                       <td
                         key={colIndex}
                         className="nugrid-cell"
+                        style={{ width: getCellWidth(colIndex), height: getCellHeight(rowIndex) }}
                       >
                         {cell !== null && cell !== undefined ? String(cell) : ''}
                       </td>
                     ))
                   ) : (
-                    // Handle case where row is a single value (1-column grid)
-                    <td className="nugrid-cell">
+                    <td className="nugrid-cell" style={{ width: getCellWidth(0), height: getCellHeight(rowIndex) }}>
                       {row !== null && row !== undefined ? String(row) : ''}
                     </td>
                   )}