Find and Replace

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

  const grid = createDataGrid<Person>({
    columns, data, getRowId,
    features: [
      filtering(),
      editing(),        // without it, find works and replace has nothing to write with
      findReplace()
    ]
  });
</script>

<Grid.FindReplace {grid} />
<DataGrid {grid} class="h-96" />

<!-- Ctrl+F opens it, Enter and Shift+Enter step through the matches, and
     Escape closes it. Turn the shortcuts off with hotkeys: false. -->

const find = getFindReplace(grid)!;
find.query = 'a';
find.total;   // 60 over the whole set

grid.api.setQuickFilter?.('Core');
find.total;   // 13 over the rows the filter left

// It matches what a cell DRAWS, not the value behind it: a date matches its
// formatted text, and a masked column is searched masked.

const find = getFindReplace(grid)!;

find.total;           // how many cells matched
find.writableTotal;   // how many of those can actually be written
find.current;         // which match the cursor is on, zero-based
find.active;          // that Match: { row, col, rowId, columnId }
find.matches;         // all of them

// The two counts differ, and the difference is the point. A match in a column
// that is not editable, or one masked by policy(), is FOUND but not
// REPLACEABLE: the value on screen is not the value underneath, so writing
// over it would commit the mask.

find.canReplaceCurrent;   // false on a match that cannot be written
find.canReplaceAll;       // false when nothing found is writable
find.replaceAvailable;    // false when the feature was registered replace: false

find.partial;            // true: the grid holds one page, not the set
find.replaceAvailable;   // false unless serverReplace is set

// Off by default, and the default is the safe one. A replace writes into the
// page the grid is holding; the next fetch overwrites it, and the panel has
// already reported success. Turn it on only when your edits reach whatever
// getRows reads from.
findReplace({ serverReplace: true });