Range Selection

import { createDataGrid, editing, rangeSelection } from '@sv5ui/datagrid';

const grid = createDataGrid<Week>({
  columns,
  data: weeks,
  getRowId: (row) => String(row.id),
  features: [
    editing(),          // ranges write through the edit stack, so undo works
    rangeSelection({ multiple: true })
  ]
});

rangeSelection({ fill: true });

const range = getRangeSelection(grid)!;
range.fillWithin('down');    // Ctrl+D: copy the top row down the selection
range.fillWithin('right');   // Ctrl+R: copy the leftmost column across

// The handle is the other operation: it continues a series PAST the
// selection, reading the step from the cells in it.
continueSeries([1, 2], 3);                              // [3, 4, 5]
continueSeries([0, 5], 3);                              // [10, 15, 20]
continueSeries([3, 1], 2);                              // [-1, -3]
continueSeries([7], 3);                                 // [7, 7, 7]
continueSeries([jan(1), jan(2)], 2);                    // [Jan 3, Jan 4]
continueSeries(['Item 1', 'Item 2'], 2);                // ['Item 3', 'Item 4']

rangeSelection({ rangeEdit: true });

const range = getRangeSelection(grid)!;

// Select a rectangle, type, and Ctrl+Enter writes it into every cell. One
// transaction, so one undo takes it all back.
range.applyToRange('pending');
grid.api.undo?.();

// A cell the column will not accept is skipped rather than failing the batch.

rangeSelection({ cut: true });

const range = getRangeSelection(grid)!;

range.cutRange();          // Ctrl+X: a dashed border, values left in place
range.moveRange(4, 2);     // Ctrl+V at a new anchor: the block moves
range.cancelCut();         // Escape

range.cutSource;           // the CellRange lifted, or null
range.moveTarget;          // where it would land

<script lang="ts">
  import { DataGrid, Grid } from '@sv5ui/datagrid';

  const money = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
  });
</script>

<DataGrid {grid} />
<Grid.RangeStatusBar {grid} />
<Grid.RangeStatusBar {grid} format={(value) => money.format(value)} />

const grid = createDataGrid<Week>({
  columns,
  data: weeks,
  getRowId,
  features: [
    selection(),        // whole rows, and the checkbox column
    rangeSelection(),   // rectangles of cells
    editing()           // what a range writes through
  ]
});

const rows = getSelection(grid)!.selectedIds;
const cells = getRangeSelection(grid)!.cellCount;

// Neither reads the other's state. With policy() registered, a masked cell
// copies masked and refuses to be written.

const grid = createDataGrid<Person>({
  columns, data: [], getRowId,
  rowModel: 'server',
  features: [
    rangeSelection(),
    virtualization({ rowHeight: 40, overscan: 6 }),
    serverRowModel(source, { mode: 'infinite', blockSize: 100, placeholder })
  ]
});

const range = getRangeSelection(grid)!;
range.startRange(0, 1);
range.extendTo(19, 1);  // extendTo draws to an absolute cell; extendBy is the
                        // keyboard's, and measures from the focused cell
range.selectedValues;   // the twenty salaries, because that block has arrived

range.startRange(1000, 1);
range.extendTo(1019, 1);
range.selectedValues;   // twenty zeros: those rows have not been fetched

// A range is indices, not rows, so it can be drawn over rows that have not
// arrived. Those cells read as whatever the placeholder holds, and the sum
// in the status bar counts them, so a total can be quietly short.
const pending = countPlaceholders(grid, range.ranges);

// Which is worth knowing before wiring a range to anything that acts on it.
// The honest options are to keep the range inside what is loaded, or to
// fetch the rest first:
await grid.api.fetchAllServerRows?.({ batchSize: 500 });