Feature/column width manager

package.json

@@ -33,6 +33,7 @@
     "scheduler": ">=0.19.0"
   },
   "dependencies": {
+    "@react_db_client/components.column-manager": "^0.1.7",
     "@reduxjs/toolkit": "^1.7.1",
     "@types/array.prototype.flatmap": "^1.2.2",
     "array.prototype.flatmap": "^1.2.5",
@@ -144,4 +145,4 @@
     "url": "https://github.com/iddan/react-spreadsheet/issues"
   },
   "homepage": "https://github.com/iddan/react-spreadsheet#readme"
-}
+}

src/Cell.test.tsx

@@ -32,6 +32,7 @@ const EXAMPLE_PROPS: Types.CellComponentProps = {
   select: MOCK_SELECT,
   activate: MOCK_ACTIVATE,
   setCellDimensions: MOCK_SET_CELL_DIMENSIONS,
+  width: 100,
 };
 const EXAMPLE_DATA_VIEWER_PROPS: Types.DataViewerProps = {
   row: EXAMPLE_ROW,

src/Cell.tsx

@@ -24,6 +24,7 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
   select,
   activate,
   setCellDimensions,
+  width,
 }): React.ReactElement => {
   const rootRef = React.useRef<HTMLTableCellElement | null>(null);
   const point = React.useMemo(
@@ -75,22 +76,26 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
   }
 
   return (
-    <td
+    <div
+      role="cell"
       ref={rootRef}
       className={classnames("Spreadsheet__cell", data?.className, {
         "Spreadsheet__cell--readonly": data?.readOnly,
       })}
       onMouseOver={handleMouseOver}
       onMouseDown={handleMouseDown}
       tabIndex={0}
+      style={{
+        width,
+      }}
     >
       <DataViewer
         row={row}
         column={column}
         cell={data}
         formulaParser={formulaParser}
       />
-    </td>
+    </div>
   );
 };
 

src/ColumnIndicator.test.tsx

@@ -11,24 +11,34 @@ const EXAMPLE_PROPS: Types.ColumnIndicatorProps = {
   column: 0,
   selected: false,
   onSelect: jest.fn(),
+  width: 100,
 };
 
 describe("<ColumnIndicator />", () => {
   test("renders with column letter", () => {
     render(<ColumnIndicator {...EXAMPLE_PROPS} />);
-    expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1);
+    expect(
+      document.querySelectorAll("[role=columnheader].Spreadsheet__header")
+        .length
+    ).toBe(1);
     expect(screen.queryByText("A")).not.toBeNull();
   });
   test("renders with label", () => {
     render(<ColumnIndicator {...EXAMPLE_PROPS} label="Example Label" />);
-    expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1);
+    expect(
+      document.querySelectorAll("[role=columnheader].Spreadsheet__header")
+        .length
+    ).toBe(1);
     expect(screen.queryByText("Example Label")).not.toBeNull();
   });
   test("calls onSelect", () => {
     render(<ColumnIndicator {...EXAMPLE_PROPS} />);
-    expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1);
+    expect(
+      document.querySelectorAll("[role=columnheader].Spreadsheet__header")
+        .length
+    ).toBe(1);
     const indicator = document.querySelector(
-      "th.Spreadsheet__header"
+      "[role=columnheader].Spreadsheet__header"
     ) as HTMLTableCellElement;
     indicator.click();
     expect(EXAMPLE_PROPS.onSelect).toBeCalledTimes(1);

src/ColumnIndicator.tsx

@@ -11,6 +11,7 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
   column,
   label,
   selected,
+  width,
   onSelect,
 }) => {
   const handleClick = React.useCallback(
@@ -19,16 +20,21 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
     },
     [onSelect, column]
   );
+
   return (
-    <th
+    <div
+      role="columnheader"
       className={classNames("Spreadsheet__header", {
         "Spreadsheet__header--selected": selected,
       })}
       onClick={handleClick}
       tabIndex={0}
+      style={{
+        width,
+      }}
     >
       {label !== undefined ? label : columnIndexToLabel(String(column))}
-    </th>
+    </div>
   );
 };
 

src/CornerIndicator.test.tsx

@@ -10,18 +10,25 @@ import CornerIndicator from "./CornerIndicator";
 const EXAMPLE_PROPS: Types.CornerIndicatorProps = {
   selected: false,
   onSelect: jest.fn(),
+  width: 100,
 };
 
 describe("<CornerIndicator />", () => {
   test("renders", () => {
     render(<CornerIndicator {...EXAMPLE_PROPS} />);
-    expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1);
+    expect(
+      document.querySelectorAll("[role=columnheader].Spreadsheet__header")
+        .length
+    ).toBe(1);
   });
   test("calls onSelect", () => {
     render(<CornerIndicator {...EXAMPLE_PROPS} />);
-    expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1);
+    expect(
+      document.querySelectorAll("[role=columnheader].Spreadsheet__header")
+        .length
+    ).toBe(1);
     const indicator = document.querySelector(
-      "th.Spreadsheet__header"
+      "[role=columnheader].Spreadsheet__header"
     ) as HTMLTableCellElement;
     indicator.click();
     expect(EXAMPLE_PROPS.onSelect).toBeCalledTimes(1);

src/CornerIndicator.tsx

@@ -9,17 +9,20 @@ import useSelector from "./use-selector";
 const CornerIndicator: Types.CornerIndicatorComponent = ({
   selected,
   onSelect,
+  width,
 }) => {
   const handleClick = React.useCallback(() => {
     onSelect();
   }, [onSelect]);
   return (
-    <th
+    <div
+      role="columnheader"
       className={classNames("Spreadsheet__header", {
         "Spreadsheet__header--selected": selected,
       })}
       onClick={handleClick}
       tabIndex={0}
+      style={{ width }}
     />
   );
 };

src/HeaderRow.test.tsx

@@ -9,16 +9,16 @@ import HeaderRow from "./HeaderRow";
 describe("<HeaderRow />", () => {
   test("renders", () => {
     render(<HeaderRow />);
-    const row = document.querySelector("tr");
+    const row = document.querySelector("[role=row]");
     expect(row).not.toBeNull();
   });
   test("renders with children", () => {
     render(
       <HeaderRow>
-        <th></th>
+        <div role="columnheader"></div>
       </HeaderRow>
     );
-    const cell = document.querySelector("tr th");
+    const cell = document.querySelector("[role=columnheader]");
     expect(cell).not.toBeNull();
   });
 });

src/HeaderRow.tsx

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

src/Row.test.tsx

@@ -9,16 +9,16 @@ import Row from "./Row";
 describe("<Row />", () => {
   test("renders", () => {
     render(<Row row={0} />);
-    const row = document.querySelector("tr");
+    const row = document.querySelector("[role=row]");
     expect(row).not.toBeNull();
   });
   test("renders with children", () => {
     render(
       <Row row={1}>
-        <td></td>
+        <div role="cell"></div>
       </Row>
     );
-    const cell = document.querySelector("tr td");
+    const cell = document.querySelector("[role=cell]");
     expect(cell).not.toBeNull();
   });
 });

src/Row.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 import * as Types from "./types";
 
-const Row: Types.RowComponent = (props) => <tr {...props} />;
+const Row: Types.RowComponent = (props) => (
+  <div role="row" className="Spreadsheet__body-row" {...props} />
+);
 
 export default Row;

src/RowIndicator.test.tsx

@@ -11,24 +11,25 @@ const EXAMPLE_PROPS: Types.RowIndicatorProps = {
   row: 0,
   selected: false,
   onSelect: jest.fn(),
+  width: 100,
 };
 
 describe("<RowIndicator />", () => {
   test("renders with row number", () => {
     render(<RowIndicator {...EXAMPLE_PROPS} />);
-    expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1);
+    expect(document.querySelectorAll("div.Spreadsheet__header").length).toBe(1);
     expect(screen.queryByText("1")).not.toBeNull();
   });
   test("renders with label", () => {
     render(<RowIndicator {...EXAMPLE_PROPS} label="Example Label" />);
-    expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1);
+    expect(document.querySelectorAll("div.Spreadsheet__header").length).toBe(1);
     expect(screen.queryByText("Example Label")).not.toBeNull();
   });
   test("calls on select", () => {
     render(<RowIndicator {...EXAMPLE_PROPS} />);
-    expect(document.querySelectorAll("th.Spreadsheet__header").length).toBe(1);
+    expect(document.querySelectorAll("div.Spreadsheet__header").length).toBe(1);
     const indicator = document.querySelector(
-      "th.Spreadsheet__header"
+      "div.Spreadsheet__header"
     ) as HTMLTableCellElement;
     indicator.click();
     expect(EXAMPLE_PROPS.onSelect).toBeCalledTimes(1);

src/RowIndicator.tsx

@@ -11,6 +11,7 @@ const RowIndicator: Types.RowIndicatorComponent = ({
   label,
   selected,
   onSelect,
+  width,
 }) => {
   const handleClick = React.useCallback(
     (event: React.MouseEvent) => {
@@ -20,15 +21,17 @@ const RowIndicator: Types.RowIndicatorComponent = ({
   );
 
   return (
-    <th
+    <div
+      role="columnheader"
       className={classNames("Spreadsheet__header", {
         "Spreadsheet__header--selected": selected,
       })}
       onClick={handleClick}
       tabIndex={0}
+      style={{ width }}
     >
       {label !== undefined ? label : row + 1}
-    </th>
+    </div>
   );
 };
 

src/Spreadsheet.css

@@ -15,6 +15,21 @@
   display: inline-block;
 }
 
+.Spreadsheet_body {
+  display: flex;
+  flex-direction: column;
+}
+
+.Spreadsheet__header-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.Spreadsheet__body-row {
+  display: flex;
+  flex-direction: row;
+}
+
 .Spreadsheet--dark-mode {
   --background-color: black;
   --text-color: white;
@@ -37,6 +52,7 @@
 .Spreadsheet__table {
   border-collapse: collapse;
   table-layout: fixed;
+  display: "flex";
 }
 
 .Spreadsheet__cell,
@@ -54,7 +70,7 @@
 
 .Spreadsheet__cell,
 .Spreadsheet__header {
-  min-width: 6em;
+  /* min-width: 6em; */
   min-height: 1.9em;
   height: 1.9em;
   max-height: 1.9em;