CSS based row numbering

codaxy · Apr 9, 2020 · 88e159f · 88e159f
1 parent 97a3776
commit 88e159f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/docs/content/examples/grid/Buffering.js b/docs/content/examples/grid/Buffering.js
@@ -38,11 +38,11 @@ export const Buffering = <cx>
                 records:bind="$page.records"
                 keyField="id"
                 buffered
-                style="height: 800px"
+                style="height: 650px"
                 mod="fixed-layout"
                 cached
                 columns={[
-                    { header: '#', field: "index", sortable: true, value: { expr: "{$index}+1"}, defaultWidth: 50 },
+                    { header: '#', defaultWidth: 50, items: <cx><div class="cxe-grid-row-number" /></cx> },
                     { header: { text: "Name", style: 'width: 100%' }, field: "fullName", sortable: true, resizable: true },
                     { header: "Continent", field: "continent", sortable: true, resizable: true, defaultWidth: 150 },
                     { header: "Browser", field: "browser", sortable: true, resizable: true, defaultWidth: 170 },
@@ -75,20 +75,20 @@ export const Buffering = <cx>
                     records:bind="$page.records"
                     keyField="id"
                     buffered
-                    style="height: 800px"
+                    style="height: 650px"
                     mod="fixed-layout"
                     cached
                     columns={[
-                        { header: '#', field: "index", sortable: true, value: { expr: "{$index}+1"} },
+                        { header: '#', defaultWidth: 50, items: <cx><div class="cxe-grid-row-number" /></cx> },
                         { header: { text: "Name", style: 'width: 100%' }, field: "fullName", sortable: true, resizable: true },
                         { header: "Continent", field: "continent", sortable: true, resizable: true, defaultWidth: 150 },
                         { header: "Browser", field: "browser", sortable: true, resizable: true, defaultWidth: 170 },
-                        { header: "OS", field: "os", sortable: true, resizable: true, defaultWidth: 100 },
+                        { header: "OS", field: "os", sortable: true, resizable: true, defaultWidth: 80 },
                         { header: "Visits", field: "visits", sortable: true, align: "right", resizable: true, defaultWidth: 70 }
                     ]}
                     selection={{ type: KeySelection, bind: "$page.selection" }}
                 />
-                `}</CodeSnippet>
+            `}</CodeSnippet>
         </CodeSplit>
 
     </Md>

diff --git a/packages/cx/src/widgets/grid/Grid.js b/packages/cx/src/widgets/grid/Grid.js
@@ -1745,7 +1745,7 @@ class GridComponent extends VDOM.Component {
       return (
          <div
             className={data.classNames}
-            style={data.style}
+            style={{ ...data.style, "counter-reset": `cx-row-number ${start}` }}
             tabIndex={
                widget.selectable || widget.cellEditable
                   ? data.tabIndex || 0

diff --git a/packages/cx/src/widgets/grid/Grid.scss b/packages/cx/src/widgets/grid/Grid.scss
@@ -95,11 +95,6 @@
          }
       }
 
-      .#{$element}#{$name}-cell-clip {
-         overflow: hidden;
-         text-overflow: ellipsis;
-      }
-
       &.#{$state}resizable {
          .#{$element}#{$name}-data td,
          .#{$element}#{$name}-group-footer td,
@@ -137,6 +132,16 @@
       }
    }
 
+   .#{$element}#{$name}-cell-clip {
+      overflow: hidden;
+      text-overflow: ellipsis;
+   }
+
+   .#{$element}#{$name}-row-number::after {
+      counter-increment: cx-row-number;
+      content: counter(cx-row-number);
+   }
+
    .#{$element}#{$name}-fixed-header {
       overflow: hidden;
       position: absolute;