diff --git a/README.md b/README.md index f413c284..1d2670bb 100644 --- a/README.md +++ b/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. diff --git a/src/sort.ts b/src/sort.ts index a3b5d4fc..ab0acda9 100644 --- a/src/sort.ts +++ b/src/sort.ts @@ -1,4 +1,4 @@ export interface OrderBy { column?: string // column name to sort by. If undefined, the table is unsorted. - /// TODO(SL): ascending / descending + direction?: 'ascending' // sort direction. Default: 'ascending' }