Control the selection and sort

README.md

@@ -80,6 +80,10 @@ interface TableProps {
   focus?: boolean // focus table on mount? (default true)
   onDoubleClickCell?: (col: number, row: number) => void // double-click handler
   onError?: (error: Error) => void // error handler
+  orderBy?: OrderBy; // order by column (if defined, the component order is controlled by the parent)
+  onOrderByChange?: (orderBy: OrderBy) => void; // orderBy change handler
+  selection?: Selection; // selection state (if defined, the component selection is controlled by the parent)
+  onSelectionChange?: (selection: Selection) => void; // selection change handler
 }
 ```
 
@@ -95,6 +99,27 @@ interface DataFrame {
 }
 ```
 
+OrderBy is defined as:
+
+```typescript
+interface OrderBy {
+  column: string; // column name
+  direction?: "ascending"; // sort direction - only ascending is supported
+}
+```
+
+Selection is defined as:
+
+```typescript
+interface Selection {
+  ranges: Array<{
+    start: number; // inclusive lower limit, positive integer
+    end: number; // exclusive upper limit, positive integer, strictly greater than start (no zero-length ranges).
+  }>; // the rows selection is an array of row index ranges (0-based). The values are indexes of the virtual table (sorted rows), and thus depend on the order.
+  anchor?: number; // anchor row used as a reference for shift+click selection. It's a virtual table index (sorted), and thus depends on the order.
+}
+```
+
 ## Sortable DataFrame
 
 If your data source supports sorting, set the sortable property to true in your DataFrame object. When sorting is enabled, the rows function will receive an additional orderBy parameter, which represents the column name to sort by.

package.json

@@ -41,6 +41,7 @@
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "12.1.2",
     "@testing-library/react": "16.1.0",
+    "@testing-library/user-event": "14.5.2",
     "@types/node": "22.10.5",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.1",

src/HighTable.css

@@ -110,19 +110,27 @@
 .table th:first-child input {
   display: none;
 }
-.selectable th:first-child:hover span, .selectable tr.selected th:first-child span {
+/* for selected rows, replace row numbers with checkboxes and highlight the rows */
+tr.selected th:first-child span {
   display: none;
 }
-.selectable th:first-child:hover input, .selectable tr.selected th:first-child input {
+tr.selected th:first-child input {
   display: inline;
-  cursor: pointer;
 }
-.selectable tr.selected {
+tr.selected {
   background-color: #fbf7bf;
 }
-.selectable tr.selected th:first-child {
+tr.selected th:first-child {
   background-color: #f1edbb;
 }
+/* if selectable, show checkboxes on hover (and focus) */
+.selectable th:first-child:hover span, .selectable th:first-child:focus span {
+  display: none;
+}
+.selectable th:first-child:hover input, .selectable th:first-child:focus input {
+  display: inline;
+  cursor: pointer;
+}
 
 /* cells */
 .table th,
@@ -226,21 +234,24 @@
   display: flex;
   justify-content: center;
 }
-.selectable .table-corner {
-  background: #e4e4e6;
-  cursor: pointer;
-}
+/* replace corner with checkbox if selection is enabled (read-only or not) */
 .table-corner input {
   display: none;
 }
-.selectable .table-corner span {
+.table-corner.show-corner-selection  {
+  background: #e4e4e6;
+}
+.table-corner.show-corner-selection  span {
   display: none;
 }
-.selectable .table-corner input {
+.table-corner.show-corner-selection  input {
   display: inline;
-  cursor: pointer;
   text-align: center;
 }
+/* if selectable, show pointer cursor on checkbox */
+.selectable .table-corner, .selectable .table-corner input {
+  cursor: pointer;
+}
 
 /* mock row numbers */
 .mock-row-label {