create-emsgrid 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-emsgrid",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": false,
   "description": "Create an EMS Grid project",
   "license": "MIT",

package/template/src/components/Grid/core/Grid.tsx

@@ -74,7 +74,19 @@ export function Grid<TData>(props: GridProps<TData>) {
     rowHeight,
     overscan,
   });
+  const tableWidth = table.getTotalSize();
   const firstContentColumnId = table.getVisibleLeafColumns().find((col) => col.id !== 'select')?.id;
+  const headerRef = React.useRef<HTMLDivElement | null>(null);
+  const syncHorizontalScroll = React.useCallback(
+    (source: HTMLDivElement | null, target: HTMLDivElement | null) => {
+      if (!source || !target) return;
+      const nextLeft = source.scrollLeft;
+      if (target.scrollLeft !== nextLeft) {
+        target.scrollLeft = nextLeft;
+      }
+    },
+    []
+  );
   const [menu, setMenu] = React.useState<{
     open: boolean;
     x: number;
@@ -95,16 +107,22 @@ export function Grid<TData>(props: GridProps<TData>) {
 
   return (
     <div className="grid-shell">
-      <Header
-        table={table}
-        showFilters={showFilters}
-        onHeaderDragStart={handleHeaderDragStart}
-        onHeaderDrop={handleHeaderDrop}
-        isReorderableColumn={isReorderable}
-      />
+      <div ref={headerRef} className="scroll-header">
+        <Header
+          table={table}
+          showFilters={showFilters}
+          onHeaderDragStart={handleHeaderDragStart}
+          onHeaderDrop={handleHeaderDrop}
+          isReorderableColumn={isReorderable}
+        />
+      </div>
 
-      <div ref={parentRef} className="scroll">
-        <div style={{ height: totalSize, position: 'relative' }}>
+      <div
+        ref={parentRef}
+        className="scroll"
+        onScroll={() => syncHorizontalScroll(parentRef.current, headerRef.current)}
+      >
+        <div style={{ height: totalSize, position: 'relative', width: tableWidth, minWidth: '100%' }}>
           {isLoading ? (
             <div style={{ padding: 12, opacity: 0.8 }}>Загрузка…</div>
           ) : (
@@ -117,6 +135,7 @@ export function Grid<TData>(props: GridProps<TData>) {
                   row={row}
                   top={vi.start}
                   rowHeight={rowHeight}
+                  tableWidth={tableWidth}
                   firstContentColumnId={firstContentColumnId}
                   renderAggregatedCell={renderAggregatedCell}
                   isGroupMode={isGroupMode}

package/template/src/components/Grid/ui/Cell.tsx

@@ -16,6 +16,7 @@ export function Cell<TData>({
   isGroupMode = false,
 }: CellProps<TData>) {
   const depth = cell.row.depth;
+  const isGroupedCell = isGroupMode ? (cell.getIsGrouped?.() ?? false) : false;
   const canExpand = isExpanderCell && cell.row.getCanExpand();
   const isExpanded = canExpand ? cell.row.getIsExpanded() : false;
   const paddingLeft = isExpanderCell ? 10 + depth * 14 : undefined;
@@ -58,11 +59,13 @@ export function Cell<TData>({
       );
     } else if (isAggregatedCell) {
       content = aggregatedRenderer(cell);
-    } else {
+    } else if (isPlaceholder || isGroupedCell) {
       content = null;
+    } else {
+      content = defaultRenderer;
     }
   } else if (isPlaceholder) {
-    content = null;
+    content = defaultRenderer;
   } else if (isExpanderCell && canExpand) {
     content = (
       <>

package/template/src/components/Grid/ui/Header.tsx

@@ -14,11 +14,12 @@ type HeaderProps<TData> = {
 
 export function Header<TData>(props: HeaderProps<TData>) {
   const { table, showFilters, onHeaderDragStart, onHeaderDrop, isReorderableColumn } = props;
+  const tableWidth = table.getTotalSize();
 
   return (
-    <div className="grid-header">
+    <div className="grid-header" style={{ width: tableWidth, minWidth: '100%' }}>
       {table.getHeaderGroups().map((hg) => (
-        <div key={hg.id} className="row">
+        <div key={hg.id} className="row" style={{ width: tableWidth, minWidth: '100%' }}>
           {hg.headers.map((header) => {
             const col = header.column;
             const size = col.getSize();

package/template/src/components/Grid/ui/Row.tsx

@@ -6,6 +6,7 @@ type RowProps<TData> = {
   row: TableRow<TData>;
   top: number;
   rowHeight: number;
+  tableWidth: number;
   firstContentColumnId?: string;
   renderAggregatedCell?: (cell: TableCell<TData, unknown>) => React.ReactNode;
   isGroupMode?: boolean;
@@ -16,6 +17,7 @@ export function Row<TData>({
   row,
   top,
   rowHeight,
+  tableWidth,
   firstContentColumnId,
   renderAggregatedCell,
   isGroupMode,
@@ -28,7 +30,8 @@ export function Row<TData>({
         position: 'absolute',
         top,
         left: 0,
-        right: 0,
+        width: tableWidth,
+        minWidth: '100%',
         height: rowHeight,
       }}
       onContextMenu={onContextMenu}

package/template/src/styles.css

@@ -69,6 +69,11 @@ body {
   overflow: hidden;
 }
 
+.scroll-header {
+  overflow: hidden;
+}
+
+
 .grid-header {
   position: sticky;
   top: 0;