add out of order rows

src/components/Table/OutOfOrderIndicator.tsx

@@ -3,7 +3,6 @@ import { useAtom } from "jotai";
 import { styled } from "@mui/material/styles";
 import RichTooltip from "@src/components/RichTooltip";
 import WarningIcon from "@mui/icons-material/WarningAmber";
-import { OUT_OF_ORDER_MARGIN } from "./TableContainer";
 
 import {
   projectScope,
@@ -24,15 +23,7 @@ const Dot = styled("div")(({ theme }) => ({
   backgroundColor: theme.palette.warning.main,
 }));
 
-export interface IOutOfOrderIndicatorProps {
-  top: number;
-  height: number;
-}
-
-export default function OutOfOrderIndicator({
-  top,
-  height,
-}: IOutOfOrderIndicatorProps) {
+export default function OutOfOrderIndicator() {
   const [dismissed, setDismissed] = useAtom(
     tableOutOfOrderDismissedAtom,
     projectScope
@@ -42,11 +33,12 @@ export default function OutOfOrderIndicator({
     <div
       className="out-of-order-dot"
       style={{
-        position: "absolute",
-        top: top,
-        height: height - OUT_OF_ORDER_MARGIN - 2,
-        marginLeft: `max(env(safe-area-inset-left), 16px)`,
+        position: "sticky",
+        zIndex: 9,
+        top: 0,
+        left: 8,
         width: 12,
+        marginRight: -12,
       }}
     >
       <RichTooltip

src/components/Table/Styled/StyledCell.tsx

@@ -5,14 +5,16 @@ export const StyledCell = styled("div")(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   "--cell-padding": theme.spacing(10 / 8),
-  padding: "0 var(--cell-padding)",
+
+  "& > .cell-contents": {
+    padding: "0 var(--cell-padding)",
+    lineHeight: "calc(var(--row-height) - 1px)",
+  },
 
   overflow: "visible",
   contain: "none",
   position: "relative",
 
-  lineHeight: "calc(var(--row-height) - 1px)",
-
   backgroundColor: theme.palette.background.paper,
 
   border: `1px solid ${theme.palette.divider}`,

src/components/Table/Styled/StyledRow.tsx

@@ -5,6 +5,7 @@ import { DEFAULT_ROW_HEIGHT } from "@src/components/Table";
 export const StyledRow = styled("div")(({ theme }) => ({
   display: "flex",
   height: DEFAULT_ROW_HEIGHT,
+  position: "relative",
 
   "& > *": {
     flexGrow: 0,

src/components/Table/Table.tsx

@@ -23,6 +23,7 @@ import { StyledTable } from "./Styled/StyledTable";
 import { StyledRow } from "./Styled/StyledRow";
 import { StyledResizer } from "./Styled/StyledResizer";
 import ColumnHeaderComponent from "./Column";
+import OutOfOrderIndicator from "./OutOfOrderIndicator";
 
 import { IconButton } from "@mui/material";
 
@@ -303,7 +304,13 @@ export default function TableComponent() {
         aria-readonly={tableSettings.readOnly}
         aria-colcount={columns.length}
         aria-rowcount={tableRows.length + 1}
-        style={{ width: table.getTotalSize(), userSelect: "none" }}
+        style={
+          {
+            width: table.getTotalSize(),
+            userSelect: "none",
+            "--row-height": `${tableSchema.rowHeight || DEFAULT_ROW_HEIGHT}px`,
+          } as any
+        }
         onKeyDown={handleKeyDown}
       >
         <div
@@ -317,7 +324,12 @@ export default function TableComponent() {
           }}
         >
           {table.getHeaderGroups().map((headerGroup) => (
-            <StyledRow key={headerGroup.id} role="row" aria-rowindex={1}>
+            <StyledRow
+              key={headerGroup.id}
+              role="row"
+              aria-rowindex={1}
+              style={{ height: DEFAULT_ROW_HEIGHT + 1 }}
+            >
               {headerGroup.headers.map((header) => {
                 const isSelectedCell =
                   (!selectedCell && header.index === 0) ||
@@ -375,6 +387,7 @@ export default function TableComponent() {
 
           {virtualRows.map((virtualRow) => {
             const row = rows[virtualRow.index];
+            const outOfOrder = row.original._rowy_outOfOrder;
 
             return (
               <StyledRow
@@ -382,12 +395,10 @@ export default function TableComponent() {
                 role="row"
                 aria-rowindex={row.index + 2}
                 style={{
-                  height: tableSchema.rowHeight,
-                  marginBottom: row.original._rowy_outOfOrder
-                    ? OUT_OF_ORDER_MARGIN
-                    : 0,
+                  height: "auto",
+                  marginBottom: outOfOrder ? OUT_OF_ORDER_MARGIN : 0,
                 }}
-                data-out-of-order={row.original._rowy_outOfOrder || undefined}
+                data-out-of-order={outOfOrder || undefined}
               >
                 {paddingLeft > 0 && (
                   <div
@@ -396,6 +407,8 @@ export default function TableComponent() {
                   />
                 )}
 
+                {outOfOrder && <OutOfOrderIndicator />}
+
                 {virtualCols.map((virtualCell) => {
                   const cellIndex = virtualCell.index;
                   const cell = row.getVisibleCells()[cellIndex];
@@ -446,10 +459,15 @@ export default function TableComponent() {
                         (e.target as HTMLDivElement).focus();
                       }}
                     >
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
+                      <div
+                        className="cell-contents"
+                        style={{ height: tableSchema.rowHeight }}
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </div>
                       {/* <button
                         tabIndex={isSelectedCell && focusInsideCell ? 0 : -1}
                       >

src/components/Table/TableRow.tsx

@@ -16,7 +16,7 @@ export default function TableRow(props: RowRendererProps<any>) {
   if (props.row._rowy_outOfOrder)
     return (
       <Fragment key={props.row._rowy_ref.path}>
-        <OutOfOrderIndicator top={props.top} height={props.height} />
+        {/* <OutOfOrderIndicator top={props.top} height={props.height} /> */}
         <Row onContextMenu={handleContextMenu} {...props} />
       </Fragment>
     );