@lensui/lens-table 0.1.3 → 0.1.4

package/dist/index.css

@@ -56,13 +56,16 @@
   overscroll-behavior-x: none;
   touch-action: pan-x pan-y;
   -webkit-overflow-scrolling: touch;
-  scrollbar-gutter: stable;
-  scrollbar-color: #92979c transparent;
+  scrollbar-width: none;
 }
 .rvg-scroller.is-context-menu-open {
   overflow: hidden;
   touch-action: none;
 }
+.rvg-scroller::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
 .rvg-scroller::-webkit-scrollbar-track,
 .rvg-scroller::-webkit-scrollbar-corner {
   background: transparent;
@@ -90,6 +93,65 @@
   overflow: hidden;
   pointer-events: none;
 }
+.rvg-text-layer::before {
+  position: absolute;
+  z-index: 5;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 1px;
+  background: var(--rvg-color-grid);
+  content: "";
+  pointer-events: none;
+}
+.rvg-vertical-scrollbar,
+.rvg-horizontal-scrollbar {
+  position: absolute;
+  z-index: 7;
+  display: none;
+  opacity: 0;
+  pointer-events: none;
+  touch-action: none;
+  transition: opacity 160ms ease;
+}
+.rvg-vertical-scrollbar.is-active,
+.rvg-horizontal-scrollbar.is-active {
+  opacity: 1;
+  pointer-events: auto;
+}
+.rvg-vertical-scrollbar {
+  right: 2px;
+  width: 9px;
+}
+.rvg-horizontal-scrollbar {
+  height: 9px;
+}
+.rvg-vertical-scrollbar-thumb,
+.rvg-horizontal-scrollbar-thumb {
+  position: absolute;
+  border-radius: 999px;
+  background: #92979c;
+  opacity: .82;
+  cursor: default;
+}
+.rvg-vertical-scrollbar-thumb {
+  top: 0;
+  right: 1px;
+  width: 7px;
+  min-height: 28px;
+}
+.rvg-horizontal-scrollbar-thumb {
+  bottom: 1px;
+  left: 0;
+  height: 7px;
+  min-width: 36px;
+}
+.rvg-vertical-scrollbar:hover .rvg-vertical-scrollbar-thumb,
+.rvg-horizontal-scrollbar:hover .rvg-horizontal-scrollbar-thumb,
+.rvg-vertical-scrollbar-thumb:hover,
+.rvg-horizontal-scrollbar-thumb:hover {
+  opacity: 1;
+}
 .rvg-text-scroll-clip,
 .rvg-body-text-clip {
   position: absolute;
@@ -134,6 +196,10 @@
   pointer-events: auto;
   cursor: text;
 }
+.rvg-header-title {
+  pointer-events: none;
+  cursor: default;
+}
 .rvg-cell-text {
   transition: transform 140ms ease, opacity 100ms ease;
 }
@@ -407,6 +473,47 @@
   color: var(--rvg-color-muted);
   font-weight: 600;
 }
+.rvg-header-group {
+  z-index: 3;
+  border-right: 1px solid var(--rvg-color-grid);
+  border-bottom: 1px solid var(--rvg-color-grid);
+  background: var(--rvg-color-header-bg);
+  box-sizing: border-box;
+}
+.rvg-header-group.is-leaf {
+  z-index: 2;
+}
+.rvg-text-fixed-shadow {
+  position: absolute;
+  z-index: 4;
+  top: 0;
+  bottom: 0;
+  width: 10px;
+  pointer-events: none;
+}
+.rvg-text-fixed-shadow.is-left {
+  background:
+    linear-gradient(
+      90deg,
+      rgba(5, 5, 5, 0.06),
+      transparent);
+}
+.rvg-text-fixed-shadow.is-right {
+  background:
+    linear-gradient(
+      90deg,
+      transparent,
+      rgba(5, 5, 5, 0.06));
+}
+.rvg-text-fixed-border {
+  position: absolute;
+  z-index: 5;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--rvg-color-grid);
+  pointer-events: none;
+}
 .rvg-header-icons {
   position: absolute;
   z-index: 2;

package/dist/index.d.cts

@@ -167,6 +167,8 @@ interface GridColumn<Row> {
     title: string;
     /** Custom React content rendered in the header DOM overlay. */
     renderHeader?: (column: GridColumn<Row>) => ReactNode;
+    /** Child columns used to build grouped / multi-level headers. Only leaf columns render body cells. */
+    children?: GridColumn<Row>[];
     /** Row field used as this column's cell value. Omit for utility columns. */
     dataIndex?: keyof Row;
     /** Preferred column width in pixels. Layout helpers enforce minimums. */
@@ -346,7 +348,13 @@ interface TableProps<Row extends object> {
     onSelectedColumnKeysChange?: (keys: string[]) => void;
     columnDraggable?: boolean;
     columnResizable?: boolean;
-    onColumnOrderChange?: (sourceIndex: number, targetIndex: number) => void;
+    onColumnOrderChange?: (sourceIndex: number, targetIndex: number, detail?: {
+        type: 'column' | 'group';
+        sourceKey: string;
+        targetKey: string;
+        parentKey?: string;
+        placement: 'before' | 'after';
+    }) => void;
     onColumnResize?: (columnKey: string, width: number) => void;
     rowDraggable?: boolean;
     onRowOrderChange?: (sourceIndex: number, targetIndex: number) => void;

package/dist/index.d.ts

@@ -167,6 +167,8 @@ interface GridColumn<Row> {
     title: string;
     /** Custom React content rendered in the header DOM overlay. */
     renderHeader?: (column: GridColumn<Row>) => ReactNode;
+    /** Child columns used to build grouped / multi-level headers. Only leaf columns render body cells. */
+    children?: GridColumn<Row>[];
     /** Row field used as this column's cell value. Omit for utility columns. */
     dataIndex?: keyof Row;
     /** Preferred column width in pixels. Layout helpers enforce minimums. */
@@ -346,7 +348,13 @@ interface TableProps<Row extends object> {
     onSelectedColumnKeysChange?: (keys: string[]) => void;
     columnDraggable?: boolean;
     columnResizable?: boolean;
-    onColumnOrderChange?: (sourceIndex: number, targetIndex: number) => void;
+    onColumnOrderChange?: (sourceIndex: number, targetIndex: number, detail?: {
+        type: 'column' | 'group';
+        sourceKey: string;
+        targetKey: string;
+        parentKey?: string;
+        placement: 'before' | 'after';
+    }) => void;
     onColumnResize?: (columnKey: string, width: number) => void;
     rowDraggable?: boolean;
     onRowOrderChange?: (sourceIndex: number, targetIndex: number) => void;