diff --git a/package.json b/package.json
index 2290a999..c92eeb6b 100755
--- a/package.json
+++ b/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"
-}
+}
\ No newline at end of file
diff --git a/src/Cell.test.tsx b/src/Cell.test.tsx
index 66c50280..f00613b1 100644
--- a/src/Cell.test.tsx
+++ b/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,
diff --git a/src/Cell.tsx b/src/Cell.tsx
index f266205a..fff53cbe 100644
--- a/src/Cell.tsx
+++ b/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,7 +76,8 @@ 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,
@@ -83,6 +85,9 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
       onMouseOver={handleMouseOver}
       onMouseDown={handleMouseDown}
       tabIndex={0}
+      style={{
+        width,
+      }}
     >
       <DataViewer
         row={row}
@@ -90,7 +95,7 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
         cell={data}
         formulaParser={formulaParser}
       />
-    </td>
+    </div>
   );
 };
 
diff --git a/src/ColumnIndicator.test.tsx b/src/ColumnIndicator.test.tsx
index b41463b9..765462e6 100644
--- a/src/ColumnIndicator.test.tsx
+++ b/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);
diff --git a/src/ColumnIndicator.tsx b/src/ColumnIndicator.tsx
index 4ab8caba..54bd3270 100644
--- a/src/ColumnIndicator.tsx
+++ b/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>
   );
 };
 
diff --git a/src/CornerIndicator.test.tsx b/src/CornerIndicator.test.tsx
index 092eb5b1..7e7c33e9 100644
--- a/src/CornerIndicator.test.tsx
+++ b/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);
diff --git a/src/CornerIndicator.tsx b/src/CornerIndicator.tsx
index cc98b308..410dea94 100644
--- a/src/CornerIndicator.tsx
+++ b/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 }}
     />
   );
 };
diff --git a/src/HeaderRow.test.tsx b/src/HeaderRow.test.tsx
index fc85e742..116fb9f1 100644
--- a/src/HeaderRow.test.tsx
+++ b/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();
   });
 });
diff --git a/src/HeaderRow.tsx b/src/HeaderRow.tsx
index b2b694cc..3a1a344c 100644
--- a/src/HeaderRow.tsx
+++ b/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;
diff --git a/src/Row.test.tsx b/src/Row.test.tsx
index fdeb71e8..c236439a 100644
--- a/src/Row.test.tsx
+++ b/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();
   });
 });
diff --git a/src/Row.tsx b/src/Row.tsx
index 0d002b20..2dbcf960 100644
--- a/src/Row.tsx
+++ b/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;
diff --git a/src/RowIndicator.test.tsx b/src/RowIndicator.test.tsx
index e9e0d56d..c0955cb7 100644
--- a/src/RowIndicator.test.tsx
+++ b/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);
diff --git a/src/RowIndicator.tsx b/src/RowIndicator.tsx
index 84667908..9779b1e4 100644
--- a/src/RowIndicator.tsx
+++ b/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>
   );
 };
 
diff --git a/src/Spreadsheet.css b/src/Spreadsheet.css
index 382ca671..8b899eb3 100755
--- a/src/Spreadsheet.css
+++ b/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;
diff --git a/src/Spreadsheet.test.tsx b/src/Spreadsheet.test.tsx
index 14e7667d..dcdc7731 100644
--- a/src/Spreadsheet.test.tsx
+++ b/src/Spreadsheet.test.tsx
@@ -41,7 +41,7 @@ describe("<Spreadsheet />", () => {
     render(<Spreadsheet {...EXAMPLE_PROPS} />);
     // Get elements
     const element = getSpreadsheetElement();
-    const table = safeQuerySelector(element, "table.Spreadsheet__table");
+    const table = safeQuerySelector(element, "[role=table].Spreadsheet__table");
     const selected = safeQuerySelector(
       element,
       ".Spreadsheet__floating-rect--selected"
@@ -51,11 +51,15 @@ describe("<Spreadsheet />", () => {
       ".Spreadsheet__floating-rect--copied"
     );
     // Check all sub elements are rendered correctly
-    const trs = table.querySelectorAll("tr");
+    const trs = table.querySelectorAll("[role=row]");
     expect(trs).toHaveLength(ROWS + 1);
-    const tds = table.querySelectorAll("tr td.Spreadsheet__cell");
+    const tds = table.querySelectorAll(
+      "[role=row] [role=cell].Spreadsheet__cell"
+    );
     expect(tds).toHaveLength(ROWS * COLUMNS);
-    const ths = table.querySelectorAll("tr th.Spreadsheet__header");
+    const ths = table.querySelectorAll(
+      "[role=row] [role=columnheader].Spreadsheet__header"
+    );
     expect(ths).toHaveLength(ROWS + COLUMNS + 1);
     // Check active cell is not rendered
     expect(element.querySelector(".Spreadsheet__active-cell")).toBeNull();
@@ -76,7 +80,7 @@ describe("<Spreadsheet />", () => {
     );
     // Get elements
     const element = getSpreadsheetElement();
-    const cell = safeQuerySelector(element, "td");
+    const cell = safeQuerySelector(element, "[role=cell]");
     const selected = safeQuerySelector(
       element,
       ".Spreadsheet__floating-rect--selected"
@@ -103,7 +107,7 @@ describe("<Spreadsheet />", () => {
     render(<Spreadsheet {...EXAMPLE_PROPS} onModeChange={onModeChange} />);
     // Get elements
     const element = getSpreadsheetElement();
-    const cell = safeQuerySelector(element, "td");
+    const cell = safeQuerySelector(element, "[role=cell]");
     // Select cell
     fireEvent.mouseDown(cell);
     // Get active cell
@@ -125,7 +129,7 @@ describe("<Spreadsheet />", () => {
     render(<Spreadsheet {...EXAMPLE_PROPS} />);
     // Get elements
     const element = getSpreadsheetElement();
-    const cell = safeQuerySelector(element, "td");
+    const cell = safeQuerySelector(element, "[role=cell]");
     // Select cell
     fireEvent.mouseDown(cell);
     // Get active cell
@@ -175,12 +179,12 @@ describe("<Spreadsheet />", () => {
   });
   test("setting hideColumnIndicators hides column indicators", () => {
     render(<Spreadsheet {...EXAMPLE_PROPS} hideColumnIndicators />);
-    const ths = document.querySelectorAll(".Spreadsheet th");
+    const ths = document.querySelectorAll(".Spreadsheet [role=columnheader]");
     expect(ths).toHaveLength(ROWS);
   });
   test("setting hideRowIndicatos hides row indicators", () => {
     render(<Spreadsheet {...EXAMPLE_PROPS} hideRowIndicators />);
-    const ths = document.querySelectorAll(".Spreadsheet th");
+    const ths = document.querySelectorAll(".Spreadsheet [role=columnheader]");
     expect(ths).toHaveLength(COLUMNS);
   });
   test("calls onKeyDown on key down", () => {
@@ -195,14 +199,17 @@ describe("<Spreadsheet />", () => {
     render(<Spreadsheet {...EXAMPLE_PROPS} onSelect={onSelect} />);
     // Get elements
     const element = getSpreadsheetElement();
-    const firstCell = safeQuerySelector(
-      element,
-      "tr:nth-of-type(2) td:nth-of-type(1)"
-    );
-    const thirdCell = safeQuerySelector(
-      element,
-      "tr:nth-of-type(3) td:nth-of-type(2)"
-    );
+
+    const firstCell = safeQuerySelectorAll(element, [
+      ["[role=row]", 1],
+      ["[role=cell]", 0],
+    ]);
+
+    const thirdCell = safeQuerySelectorAll(element, [
+      ["[role=row]", 2],
+      ["[role=cell]", 1],
+    ]);
+
     // Activate a cell
     fireEvent.mouseDown(firstCell);
     // Clear onSelect previous calls
@@ -211,6 +218,7 @@ describe("<Spreadsheet />", () => {
     fireEvent.mouseDown(thirdCell, {
       shiftKey: true,
     });
+
     // Check onSelect is called with the range of cells on selection
     expect(onSelect).toBeCalledTimes(1);
     expect(onSelect).toBeCalledWith([
@@ -227,7 +235,7 @@ describe("<Spreadsheet />", () => {
     // Get row label elements.
     // Do not select from first row because it only contains corner and column indicators
     const rowLabelElements = element.querySelectorAll(
-      "tr:not(:first-child) th"
+      "[role=row] [role=columnheader]:not(:first-child)"
     );
     const rowLabels = Array.from(
       rowLabelElements,
@@ -235,7 +243,7 @@ describe("<Spreadsheet />", () => {
     );
     expect(rowLabels).toEqual(EXAMPLE_ROW_LABELS);
   });
-  test("setting column labels changes colum indicators labels", () => {
+  test("setting column labels changes column indicators labels", () => {
     const EXAMPLE_COLUMN_LABELS = ["First", "Second", "Third", "Fourth"];
     render(
       <Spreadsheet {...EXAMPLE_PROPS} columnLabels={EXAMPLE_COLUMN_LABELS} />
@@ -245,7 +253,7 @@ describe("<Spreadsheet />", () => {
     // Select from first row as it holds all the column indicators
     // Do not select first child as it is corner indicator
     const columnLabelElements = element.querySelectorAll(
-      "tr:first-child th:not(:first-child)"
+      "[role=row] [role=columnheader]:not(:first-child)"
     );
     const columnLabels = Array.from(
       columnLabelElements,
@@ -267,6 +275,27 @@ function safeQuerySelector<T extends Element = Element>(
   return element;
 }
 
+/** Like .querySelectorAll() but throws for no match
+ *
+ * Selector should be a list of [selector,index] tuples.
+ */
+function safeQuerySelectorAll<T extends Element = Element>(
+  node: ParentNode,
+  selectorAndIndexes: [string, number][]
+): T {
+  const out = selectorAndIndexes.reduce<T>((element, selectorAndIndex) => {
+    const [selector, index] = selectorAndIndex;
+    const elementInner = element.querySelectorAll<T>(selector);
+    try {
+      const el = elementInner[index];
+      return elementInner[index];
+    } catch (e) {
+      throw new Error(`Selector ${selector} has no matching elements`);
+    }
+  }, node as T);
+  return out;
+}
+
 /** Wrapper for expect(actual).not.toBeNull() with type assertion */
 function expectNotToBeNull<T>(
   actual: T | null | undefined
diff --git a/src/Spreadsheet.tsx b/src/Spreadsheet.tsx
index 5e8d0dd7..e749acf6 100644
--- a/src/Spreadsheet.tsx
+++ b/src/Spreadsheet.tsx
@@ -6,6 +6,7 @@ import * as PointMap from "./point-map";
 import * as Matrix from "./matrix";
 import * as Point from "./point";
 import { Parser as FormulaParser } from "hot-formula-parser";
+import { ColumnWidthManager } from "@react_db_client/components.column-manager";
 
 import DefaultTable from "./Table";
 import DefaultRow from "./Row";
@@ -120,6 +121,8 @@ export type Props<CellType extends Types.CellBase> = {
   ) => void;
 };
 
+const DEFAULT_COLUMN_WIDTH = 100;
+
 /**
  * The Spreadsheet component
  */
@@ -165,6 +168,14 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     return calculateSpreadsheetSize(state.data, rowLabels, columnLabels);
   }, [state.data, rowLabels, columnLabels]);
 
+  /* Column width manager */
+  const columnCountOffset = hideColumnIndicators ? 0 : 1;
+  const [columnWidths, setColumnWidths] = React.useState(
+    // TODO: Get initial columns widths from props
+    range(size.columns + columnCountOffset).map((i) => DEFAULT_COLUMN_WIDTH)
+  );
+  const columnManagerRef = React.useRef(null);
+
   const mode = state.mode;
 
   const rootRef = React.useRef<HTMLDivElement>(null);
@@ -426,13 +437,16 @@ const Spreadsheet = <CellType extends Types.CellBase>(
     () => (
       <Table columns={size.columns} hideColumnIndicators={hideColumnIndicators}>
         <HeaderRow>
-          {!hideRowIndicators && !hideColumnIndicators && <CornerIndicator />}
+          {!hideRowIndicators && !hideColumnIndicators && (
+            <CornerIndicator width={columnWidths[0]} />
+          )}
           {!hideColumnIndicators &&
             range(size.columns).map((columnNumber) =>
               columnLabels ? (
                 <ColumnIndicator
                   key={columnNumber}
                   column={columnNumber}
+                  width={columnWidths[columnNumber + columnCountOffset]}
                   label={
                     columnNumber in columnLabels
                       ? columnLabels[columnNumber]
@@ -440,7 +454,11 @@ const Spreadsheet = <CellType extends Types.CellBase>(
                   }
                 />
               ) : (
-                <ColumnIndicator key={columnNumber} column={columnNumber} />
+                <ColumnIndicator
+                  key={columnNumber}
+                  column={columnNumber}
+                  width={columnWidths[columnNumber + columnCountOffset]}
+                />
               )
             )}
         </HeaderRow>
@@ -451,10 +469,15 @@ const Spreadsheet = <CellType extends Types.CellBase>(
                 <RowIndicator
                   key={rowNumber}
                   row={rowNumber}
+                  width={columnWidths[0]}
                   label={rowNumber in rowLabels ? rowLabels[rowNumber] : null}
                 />
               ) : (
-                <RowIndicator key={rowNumber} row={rowNumber} />
+                <RowIndicator
+                  key={rowNumber}
+                  row={rowNumber}
+                  width={columnWidths[0]}
+                />
               ))}
             {range(size.columns).map((columnNumber) => (
               <Cell
@@ -464,10 +487,21 @@ const Spreadsheet = <CellType extends Types.CellBase>(
                 // @ts-ignore
                 DataViewer={DataViewer}
                 formulaParser={formulaParser}
+                width={columnWidths[columnNumber + columnCountOffset]}
               />
             ))}
           </Row>
         ))}
+        <ColumnWidthManager
+          setColumnWidths={setColumnWidths}
+          columnWidths={columnWidths}
+          innerRef={columnManagerRef}
+          widthPadding={400}
+          // showEdges
+          // liveDragging
+          // minWidth={minWidth}
+          // maxWidth={maxWidth}
+        />
       </Table>
     ),
     [
@@ -486,6 +520,8 @@ const Spreadsheet = <CellType extends Types.CellBase>(
       Cell,
       DataViewer,
       formulaParser,
+      columnWidths,
+      columnCountOffset,
     ]
   );
 
diff --git a/src/Table.test.tsx b/src/Table.test.tsx
index 79d0dfef..798935c2 100644
--- a/src/Table.test.tsx
+++ b/src/Table.test.tsx
@@ -10,16 +10,20 @@ describe("<Table />", () => {
   test("renders empty table", () => {
     render(<Table columns={0}>{null}</Table>);
     expect(
-      document.querySelectorAll(".Spreadsheet__table colgroup col").length
+      document.querySelectorAll(
+        ".Spreadsheet__table .colgroup .Spreadsheet__columnNode"
+      ).length
+    ).toBe(1);
+    expect(
+      document.querySelectorAll(".Spreadsheet__table .Spreadsheet_body").length
     ).toBe(1);
-    expect(document.querySelectorAll(".Spreadsheet__table tbody").length).toBe(
-      1
-    );
   });
   test("renders table with content", () => {
-    render(<Table columns={0}>{<tr id="exampleRow" />}</Table>);
+    render(<Table columns={0}>{<div role="row" id="exampleRow" />}</Table>);
     expect(
-      document.querySelectorAll(".Spreadsheet__table tbody #exampleRow").length
+      document.querySelectorAll(
+        ".Spreadsheet__table .Spreadsheet_body #exampleRow"
+      ).length
     ).toBe(1);
   });
   test("renders empty table with no cols if hideColumnIndicators is set", () => {
@@ -29,14 +33,18 @@ describe("<Table />", () => {
       </Table>
     );
     expect(
-      document.querySelectorAll(".Spreadsheet__table colgroup col").length
+      document.querySelectorAll(
+        ".Spreadsheet__table .colgroup .Spreadsheet__columnNode"
+      ).length
     ).toBe(0);
   });
   test("renders columns according to given prop", () => {
     const columns = 1;
     render(<Table columns={columns}>{null}</Table>);
     expect(
-      document.querySelectorAll(".Spreadsheet__table colgroup col").length
+      document.querySelectorAll(
+        ".Spreadsheet__table .colgroup .Spreadsheet__columnNode"
+      ).length
     ).toBe(columns + 1);
   });
 });
diff --git a/src/Table.tsx b/src/Table.tsx
index fe10283a..1fc0b2f4 100644
--- a/src/Table.tsx
+++ b/src/Table.tsx
@@ -8,12 +8,18 @@ const Table: Types.TableComponent = ({
   hideColumnIndicators,
 }) => {
   const columnCount = columns + (hideColumnIndicators ? 0 : 1);
-  const columnNodes = range(columnCount).map((i) => <col key={i} />);
+  const columnNodes = range(columnCount).map((i) => (
+    <div className="Spreadsheet__columnNode" key={i} />
+  ));
   return (
-    <table className="Spreadsheet__table">
-      <colgroup>{columnNodes}</colgroup>
-      <tbody>{children}</tbody>
-    </table>
+    <div role="table" className="Spreadsheet__table">
+      <div role="rowgroup" className="colgroup">
+        {columnNodes}
+      </div>
+      <div role="rowgroup" className="Spreadsheet_body">
+        {children}
+      </div>
+    </div>
   );
 };
 
diff --git a/src/stories/CustomCell.tsx b/src/stories/CustomCell.tsx
index ee34f7a2..df0035f4 100644
--- a/src/stories/CustomCell.tsx
+++ b/src/stories/CustomCell.tsx
@@ -7,7 +7,7 @@ import classnames from "classnames";
 import { CellComponent } from "..";
 
 const HEIGHT = 30;
-const WIDTH = 96;
+// const WIDTH = 96;
 
 const CustomCell: CellComponent = ({
   column,
@@ -21,6 +21,7 @@ const CustomCell: CellComponent = ({
   formulaParser,
   data,
   DataViewer,
+  width,
 }) => {
   const rootRef = React.createRef<HTMLTableCellElement>();
 
@@ -29,12 +30,12 @@ const CustomCell: CellComponent = ({
       { row, column },
       {
         height: HEIGHT,
-        width: WIDTH,
-        left: WIDTH * (column + 1),
+        width,
+        left: width * (column + 1),
         top: HEIGHT * (row + 1),
       }
     );
-  }, [setCellDimensions, column, row]);
+  }, [setCellDimensions, column, row, width]);
 
   React.useEffect(() => {
     if (rootRef.current && active && mode === "view") {
@@ -67,7 +68,8 @@ const CustomCell: CellComponent = ({
   }
 
   return (
-    <td
+    <div
+      role="cell"
       ref={rootRef}
       className={classnames(
         "Spreadsheet__cell",
@@ -87,7 +89,7 @@ const CustomCell: CellComponent = ({
         cell={data}
         formulaParser={formulaParser}
       />
-    </td>
+    </div>
   );
 };
 
diff --git a/src/stories/CustomCornerIndicator.tsx b/src/stories/CustomCornerIndicator.tsx
index 7ba0201b..0da9d86b 100644
--- a/src/stories/CustomCornerIndicator.tsx
+++ b/src/stories/CustomCornerIndicator.tsx
@@ -2,7 +2,8 @@ import * as React from "react";
 
 export const CustomCornerIndicator: React.FC = () => {
   return (
-    <th
+    <div
+      role="cell"
       className="Spreadsheet__header"
       style={{ position: "relative" }}
       onClick={() => alert("You clicked the corner indicator!")}
@@ -20,6 +21,6 @@ export const CustomCornerIndicator: React.FC = () => {
           transform: "rotate(45deg)",
         }}
       />
-    </th>
+    </div>
   );
 };
diff --git a/src/stories/Spreadsheet.stories.tsx b/src/stories/Spreadsheet.stories.tsx
index ef868bb7..606feb21 100644
--- a/src/stories/Spreadsheet.stories.tsx
+++ b/src/stories/Spreadsheet.stories.tsx
@@ -11,7 +11,7 @@ import { CustomCornerIndicator } from "./CustomCornerIndicator";
 type StringCell = CellBase<string | undefined>;
 type NumberCell = CellBase<number | undefined>;
 
-const INITIAL_ROWS = 6;
+const INITIAL_ROWS = 100;
 const INITIAL_COLUMNS = 4;
 const EMPTY_DATA = createEmptyMatrix<StringCell>(INITIAL_ROWS, INITIAL_COLUMNS);
 
diff --git a/src/types.ts b/src/types.ts
index 9ec90278..32e5c49f 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -80,6 +80,8 @@ export type CellComponentProps<Cell extends CellBase = CellBase> = {
   row: number;
   /** The column of the cell */
   column: number;
+  /** Column width (in px) */
+  width: number;
   /** The DataViewer component to be used by the cell */
   DataViewer: DataViewerComponent<Cell>;
   /** The FormulaParser instance to be used by the cell */
@@ -171,6 +173,8 @@ export type RowIndicatorProps = {
   label?: React.ReactNode | null;
   /** Whether the entire row is selected */
   selected: boolean;
+  /** width in px */
+  width: number;
   /** Callback to be called when the row is selected */
   onSelect: (row: number, extend: boolean) => void;
 };
@@ -186,6 +190,8 @@ export type ColumnIndicatorProps = {
   label?: React.ReactNode | null;
   /** Whether the entire column in selected */
   selected: boolean;
+  /** Column width (in px) */
+  width: number;
   /** Callback to be called when the column is selected */
   onSelect: (column: number, extend: boolean) => void;
 };
@@ -200,6 +206,8 @@ export type CornerIndicatorProps = {
   selected: boolean;
   /** Callback to select the entire table */
   onSelect: () => void;
+  /** Width in px */
+  width: number;
 };
 
 /** Type of the CornerIndicator component */
diff --git a/yarn.lock b/yarn.lock
index e007b50d..8e56f053 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -23,6 +23,13 @@
   dependencies:
     "@babel/highlight" "^7.16.0"
 
+"@babel/code-frame@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
+  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
+  dependencies:
+    "@babel/highlight" "^7.16.7"
+
 "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.16.0", "@babel/compat-data@^7.16.4":
   version "7.16.4"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.16.4.tgz#081d6bbc336ec5c2435c6346b2ae1fb98b5ac68e"
@@ -115,6 +122,15 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.9.tgz#f4af9fd38fa8de143c29fce3f71852406fc1e2fc"
+  integrity sha512-rAdDousTwxbIxbz5I7GEQ3lUip+xVCXooZNbsydCWs3xA7ZsYOv+CFRdzGxRX78BmQHu9B1Eso59AOZQOJDEdQ==
+  dependencies:
+    "@babel/types" "^7.17.0"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
 "@babel/helper-annotate-as-pure@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz#9a1f0ebcda53d9a2d00108c4ceace6a5d5f1f08d"
@@ -206,6 +222,13 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
+"@babel/helper-environment-visitor@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
+  integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-explode-assignable-expression@^7.16.0":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.16.0.tgz#753017337a15f46f9c09f674cff10cee9b9d7778"
@@ -231,6 +254,14 @@
     "@babel/template" "^7.16.0"
     "@babel/types" "^7.16.0"
 
+"@babel/helper-function-name@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz#136fcd54bc1da82fcb47565cf16fd8e444b1ff12"
+  integrity sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/types" "^7.17.0"
+
 "@babel/helper-get-function-arity@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.15.4.tgz#098818934a137fce78b536a3e015864be1e2879b"
@@ -259,6 +290,13 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
+"@babel/helper-hoist-variables@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
+  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-member-expression-to-functions@^7.15.4":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.15.4.tgz#bfd34dc9bba9824a4658b0317ec2fd571a51e6ef"
@@ -409,6 +447,13 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
+"@babel/helper-split-export-declaration@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
+  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.9":
   version "7.14.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz#6654d171b2024f6d8ee151bf2509699919131d48"
@@ -419,6 +464,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
   integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
 
+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+
 "@babel/helper-validator-option@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
@@ -470,6 +520,15 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.16.7":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.9.tgz#61b2ee7f32ea0454612def4fccdae0de232b73e3"
+  integrity sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.15.4", "@babel/parser@^7.15.5", "@babel/parser@^7.7.0", "@babel/parser@^7.7.2":
   version "7.15.6"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.6.tgz#043b9aa3c303c0722e5377fef9197f4cf1796549"
@@ -480,6 +539,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.6.tgz#8f194828193e8fa79166f34a4b4e52f3e769a314"
   integrity sha512-Gr86ujcNuPDnNOY8mi383Hvi8IYrJVJYuf3XcuBM/Dgd+bINn/7tHqsj+tKkoreMbmGsFLsltI/JJd8fOFWGDQ==
 
+"@babel/parser@^7.16.7", "@babel/parser@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.9.tgz#9c94189a6062f0291418ca021077983058e171ef"
+  integrity sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.2":
   version "7.16.2"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.2.tgz#2977fca9b212db153c195674e57cfab807733183"
@@ -1282,6 +1346,15 @@
     "@babel/parser" "^7.15.4"
     "@babel/types" "^7.15.4"
 
+"@babel/template@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
+  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/traverse@^7.1.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.15.4.tgz#ff8510367a144bfbff552d9e18e28f3e2889c22d"
@@ -1313,6 +1386,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.4.5":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.9.tgz#1f9b207435d9ae4a8ed6998b2b82300d83c37a0d"
+  integrity sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.9"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.17.9"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.17.9"
+    "@babel/types" "^7.17.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.15.4", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.7.0":
   version "7.15.6"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.6.tgz#99abdc48218b2881c058dd0a7ab05b99c9be758f"
@@ -1329,6 +1418,14 @@
     "@babel/helper-validator-identifier" "^7.15.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.16.7", "@babel/types@^7.17.0":
+  version "7.17.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
+  integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@base2/pretty-print-object@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz#371ba8be66d556812dc7fb169ebc3c08378f69d4"
@@ -1406,6 +1503,13 @@
   dependencies:
     "@emotion/memoize" "0.7.4"
 
+"@emotion/is-prop-valid@^1.1.0":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz#34ad6e98e871aa6f7a20469b602911b8b11b3a95"
+  integrity sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+
 "@emotion/memoize@0.7.4":
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
@@ -1479,12 +1583,12 @@
     "@emotion/styled-base" "^10.3.0"
     babel-plugin-emotion "^10.0.27"
 
-"@emotion/stylis@0.8.5":
+"@emotion/stylis@0.8.5", "@emotion/stylis@^0.8.4":
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 
-"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.5":
+"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.4", "@emotion/unitless@^0.7.5":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
@@ -1892,6 +1996,22 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.0.tgz#6734f8ebc106a0860dff7f92bf90df193f0935d7"
   integrity sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==
 
+"@react_db_client/components.column-manager@^0.1.7":
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/@react_db_client/components.column-manager/-/components.column-manager-0.1.7.tgz#bf84d8861d03728ab25dadb15e665b64466d2665"
+  integrity sha512-sVse+Cq0Wq9qyne+WSQgXTJhaHYzlMKR97vHbJKFNWxOOfLvpf5bu1xnYVjCNCEanJwymmyCFI8L6BAZu/d/oA==
+  dependencies:
+    "@react_db_client/constants.client-types" "0.1.5"
+    core-js "^3.0.0"
+    styled-components "5.3.5"
+
+"@react_db_client/constants.client-types@0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@react_db_client/constants.client-types/-/constants.client-types-0.1.5.tgz#b0d1edf22cb3b4a4579083e70f2366b1a7190ad3"
+  integrity sha512-tX0qu8QIYl2O7AUnwHAGOQLq+ZB7+/N7KOEEI0aGrP+Xyjc3U6jp0aqTz/mmJgYxmiHGmQl7i9gb/serWAvz0w==
+  dependencies:
+    core-js "^3.0.0"
+
 "@reduxjs/toolkit@^1.7.1":
   version "1.7.1"
   resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.7.1.tgz#994962aeb7df3c77be343dd2ad1aa48221dbaa0c"
@@ -3028,6 +3148,14 @@
   dependencies:
     "@types/unist" "*"
 
+"@types/hoist-non-react-statics@*":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz#693b316ad323ea97eed6b38ed1a3cc02b1672b57"
@@ -3223,6 +3351,15 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
+"@types/styled-components@^5.1.25":
+  version "5.1.25"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.25.tgz#0177c4ab5fa7c6ed0565d36f597393dae3f380ad"
+  integrity sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ==
+  dependencies:
+    "@types/hoist-non-react-statics" "*"
+    "@types/react" "*"
+    csstype "^3.0.2"
+
 "@types/tapable@^1", "@types/tapable@^1.0.5":
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.8.tgz#b94a4391c85666c7b73299fd3ad79d4faa435310"
@@ -4271,6 +4408,17 @@ babel-plugin-react-docgen@^4.2.1:
     lodash "^4.17.15"
     react-docgen "^5.0.0"
 
+"babel-plugin-styled-components@>= 1.12.0":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086"
+  integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-module-imports" "^7.16.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+    picomatch "^2.3.0"
+
 babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -4729,6 +4877,11 @@ camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
+camelize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -5234,6 +5387,11 @@ core-js-pure@^3.8.1, core-js-pure@^3.8.2:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.20.0.tgz#7253feccf8bb05b72c153ddccdbe391ddbffbe03"
   integrity sha512-qsrbIwWSEEYOM7z616jAVgwhuDDtPLwZSpUsU3vyUkHYqKTf/uwOJBZg2V7lMurYWkpVlaVOxBrfX0Q3ppvjfg==
 
+core-js@^3.0.0:
+  version "3.22.4"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.22.4.tgz#f4b3f108d45736935aa028444a69397e40d8c531"
+  integrity sha512-1uLykR+iOfYja+6Jn/57743gc9n73EWiOnSJJ4ba3B4fOEYDBv25MagmEZBxTp5cWq4b/KPx/l77zgsp28ju4w==
+
 core-js@^3.0.4, core-js@^3.6.5, core-js@^3.8.2:
   version "3.20.0"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.20.0.tgz#1c5ac07986b8d15473ab192e45a2e115a4a95b79"
@@ -5376,6 +5534,11 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
+
 css-color-names@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-1.0.1.tgz#6ff7ee81a823ad46e020fa2fd6ab40a887e2ba67"
@@ -5454,6 +5617,15 @@ css-selector-tokenizer@^0.7.0:
     cssesc "^3.0.0"
     fastparse "^1.1.2"
 
+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css-tree@^1.1.2, css-tree@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
@@ -7500,7 +7672,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -9199,7 +9371,7 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@4.x, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
+lodash@4.x, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -12850,6 +13022,22 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
+styled-components@5.3.5, styled-components@^5.3.5:
+  version "5.3.5"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4"
+  integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1.12.0"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 stylehacks@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.0.1.tgz#323ec554198520986806388c7fdaebc38d2c06fb"
@@ -12948,7 +13136,7 @@ supports-color@^3.2.3:
   dependencies:
     has-flag "^1.0.0"
 
-supports-color@^5.3.0, supports-color@^5.4.0:
+supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==