tinybase 4.1.0-beta.1 → 4.1.0-beta.3

package/lib/types/with-schemas/ui-react-dom.d.ts

@@ -14,14 +14,79 @@
 import {CellIdFromSchema, TableIdFromSchema} from './internal/store';
 import {
   CellProps,
+  CellPropsForTableIdAndCellId,
   ComponentReturnType,
   ExtraProps,
+  QueriesOrQueriesId,
+  ResultCellProps,
   StoreOrStoreId,
   ValueProps,
 } from './internal/ui-react';
+import {Id, Ids} from './common';
 import {ComponentType} from 'react';
-import {Id} from '../common';
-import {OptionalSchemas} from '../store';
+import {OptionalSchemas} from './store';
+
+// CustomCell
+export type CustomCell<
+  Schemas extends OptionalSchemas,
+  TableId extends TableIdFromSchema<Schemas[0]>,
+  CellId extends CellIdFromSchema<Schemas[0], TableId>,
+> = {
+  /**
+   * An optional string that will be used as the label at the top of the table
+   * column for this Cell.
+   */
+  readonly label?: string;
+  /**
+   * An optional custom component for rendering each Cell in the Table (to
+   * override the default CellView component).
+   */
+  readonly component?: ComponentType<
+    CellPropsForTableIdAndCellId<Schemas, TableId, CellId>
+  >;
+  /**
+   * An optional function for generating extra props for each custom Cell
+   * component based on Row and Cell Id.
+   */
+  readonly getComponentProps?: (rowId: Id, cellId: CellId) => ExtraProps;
+};
+
+// CustomResultCell
+export type CustomResultCell<Schemas extends OptionalSchemas> = {
+  /**
+   * An optional string that will be used as the label at the top of the table
+   * column for this Cell.
+   */
+  readonly label?: string;
+  /**
+   * An optional custom component for rendering each Cell in the ResultTable (to
+   * override the default ResultCellView component).
+   */
+  readonly component?: ComponentType<ResultCellProps<Schemas>>;
+  /**
+   * An optional function for generating extra props for each custom Cell
+   * component based on Row and Cell Id.
+   */
+  readonly getComponentProps?: (rowId: Id, cellId: Id) => ExtraProps;
+};
+
+// HtmlTableProps
+export type HtmlTableProps = {
+  /**
+   * A string className to use on the root of the resulting element.
+   */
+  readonly className?: string;
+  /**
+   * Whether a header row should be rendered at the top of the table, defaulting
+   * to `true`.
+   */
+  readonly headerRow?: boolean;
+  /**
+   * Whether an Id column should be rendered on the left of the table,
+   * defaulting to `true`.
+   */
+  readonly idColumn?: boolean;
+};
 
 // TableInHtmlTableProps
 export type TableInHtmlTableProps<
@@ -42,34 +107,25 @@ export type TableInHtmlTableProps<
    */
         readonly store?: StoreOrStoreId<Schemas>;
         /**
-   * A custom component for rendering each Cell in the Table (to override the
-   * default CellView component).
-   */
-        readonly cellComponent?: ComponentType<CellProps<Schemas>>;
-        /**
-   * A function for generating extra props for each custom Cell component based
-   * on its Id.
-   */
-        readonly getCellComponentProps?: (rowId: Id, cellId: Id) => ExtraProps;
-        /**
-   * A string className to use on the root of the resulting element.
-   */
-        readonly className?: string;
-        /**
-   * Whether a header row should be rendered at the top of the table, defaulting
-   * to `true`.
-   */
-        readonly headerRow?: boolean;
-        /**
-   * Whether an Id column should be rendered on the left of the table,
-   * defaulting to `true`.
+   * Whether the Cells should be editable. This affects the default CellView
+   * component (to use the EditableCellView component instead) but of course
+   * will not affect custom Cell components if you have set them.
    */
-        readonly idColumn?: boolean;
+        readonly editable?: boolean;
         /**
    * An optional list of Cell Ids to use for rendering a prescribed set of the
-   * Row's Cells in a given order.
+   * Table's Cells in a given order. This can also be an object with the desired
+   * Cell Ids as keys, and with a value that can either be a string label to
+   * show in the column header, or a CustomCell object to further configure the
+   * column.
    */
-        readonly customCellIds?: CellIdFromSchema<Schemas[0], TableId>[];
+        readonly customCells?:
+          | CellIdFromSchema<Schemas[0], TableId>[]
+          | {
+              [CellId in CellIdFromSchema<Schemas[0], TableId>]?:
+                | string
+                | CustomCell<Schemas, TableId, CellId>;
+            };
       }
     : never
   : never;
@@ -91,7 +147,7 @@ export type SortedTableInHtmlTableProps<
    * The Id of the Cell whose values are used for the sorting. If omitted, the
    * view will sort the Row Id itself.
    */
-        readonly cellId?: Id;
+        readonly cellId?: CellIdFromSchema<Schemas[0], TableId>;
         /**
    * Whether the sorting should be in descending order.
    */
@@ -110,34 +166,25 @@ export type SortedTableInHtmlTableProps<
    */
         readonly store?: StoreOrStoreId<Schemas>;
         /**
-   * A custom component for rendering each Cell in the Table (to override the
-   * default CellView component).
-   */
-        readonly cellComponent?: ComponentType<CellProps<Schemas>>;
-        /**
-   * A function for generating extra props for each custom Cell component based
-   * on its Id.
-   */
-        readonly getCellComponentProps?: (rowId: Id, cellId: Id) => ExtraProps;
-        /**
-   * A string className to use on the root of the resulting element.
-   */
-        readonly className?: string;
-        /**
-   * Whether a header row should be rendered at the top of the table, defaulting
-   * to `true`.
+   * Whether the Cells should be editable. This affects the default CellView
+   * component (to use the EditableCellView component instead) but of course
+   * will not affect custom Cell components if you have set them.
    */
-        readonly headerRow?: boolean;
-        /**
-   * Whether an Id column should be rendered on the left of the table,
-   * defaulting to `true`.
-   */
-        readonly idColumn?: boolean;
+        readonly editable?: boolean;
         /**
    * An optional list of Cell Ids to use for rendering a prescribed set of the
-   * Row's Cells in a given order.
+   * Table's Cells in a given order. This can also be an object with the desired
+   * Cell Ids as keys, and with a value that can either be a string label to
+   * show in the column header, or a CustomCell object to further configure the
+   * column.
    */
-        readonly customCellIds?: CellIdFromSchema<Schemas[0], TableId>[];
+        readonly customCells?:
+          | CellIdFromSchema<Schemas[0], TableId>[]
+          | {
+              [CellId in CellIdFromSchema<Schemas[0], TableId>]?:
+                | string
+                | CustomCell<Schemas, TableId, CellId>;
+            };
         /**
    * Whether the table should be interactive such that clicking a header changes
    * the sorting and/or direction.
@@ -147,6 +194,79 @@ export type SortedTableInHtmlTableProps<
     : never
   : never;
 
+// ResultTableInHtmlTableProps
+export type ResultTableInHtmlTableProps<Schemas extends OptionalSchemas> = {
+  /**
+   * The Id of the query in the Queries object for which the ResultTable will be
+   * rendered.
+   */
+  readonly queryId: Id;
+  /**
+   * The Queries object to be accessed: omit for the default context Queries
+   * object, provide an Id for a named context Queries object, or provide an
+   * explicit reference.
+   */
+  readonly queries?: QueriesOrQueriesId<Schemas>;
+  /**
+   * An optional list of Cell Ids to use for rendering a prescribed set of the
+   * ResultTable's Cells in a given order. This can also be an object with the
+   * desired Cell Ids as keys, and with a value that can either be a string
+   * label to show in the column header, or a ResultCustomCell object to further
+   * configure the column.
+   */
+  readonly customCells?:
+    | Ids
+    | {[cellId: Id]: string | CustomResultCell<Schemas>};
+};
+
+// ResultSortedTableInHtmlTableProps
+export type ResultSortedTableInHtmlTableProps<Schemas extends OptionalSchemas> =
+  {
+    /**
+   * The Id of the query in the Queries object for which the ResultTable will be
+   * rendered.
+   */
+    readonly queryId: Id;
+    /**
+   * The Id of the Cell whose values are used for the sorting. If omitted, the
+   * view will sort the Row Id itself.
+   */
+    readonly cellId?: Id;
+    /**
+   * Whether the sorting should be in descending order.
+   */
+    readonly descending?: boolean;
+    /**
+   * The number of Row Ids to skip for pagination purposes.
+   */
+    readonly offset?: number;
+    /**
+   * The maximum number of Row Ids to return.
+   */
+    readonly limit?: number;
+    /**
+   * The Queries object to be accessed: omit for the default context Queries
+   * object, provide an Id for a named context Queries object, or provide an
+   * explicit reference.
+   */
+    readonly queries?: QueriesOrQueriesId<Schemas>;
+    /**
+   * An optional list of Cell Ids to use for rendering a prescribed set of the
+   * ResultTable's Cells in a given order. This can also be an object with the
+   * desired Cell Ids as keys, and with a value that can either be a string
+   * label to show in the column header, or a ResultCustomCell object to further
+   * configure the column.
+   */
+    readonly customCells?:
+      | Ids
+      | {[cellId: Id]: string | CustomResultCell<Schemas>};
+    /**
+   * Whether the table should be interactive such that clicking a header changes
+   * the sorting and/or direction.
+   */
+    readonly sortOnClick?: boolean;
+  };
+
 // ValuesInHtmlTableProps
 export type ValuesInHtmlTableProps<Schemas extends OptionalSchemas> = {
   /**
@@ -154,6 +274,12 @@ export type ValuesInHtmlTableProps<Schemas extends OptionalSchemas> = {
    * for a named context Store, or provide an explicit reference.
    */
   readonly store?: StoreOrStoreId<Schemas>;
+  /**
+   * Whether the Values should be editable. This affects the default ValueView
+   * component (to use the EditableValueView component instead) but of course
+   * will not affect a custom valueComponent if you have set one.
+   */
+  readonly editable?: boolean;
   /**
    * A custom component for rendering each Value in the Store (to override the
    * default ValueView component).
@@ -164,20 +290,6 @@ export type ValuesInHtmlTableProps<Schemas extends OptionalSchemas> = {
    * on its Id.
    */
   readonly getValueComponentProps?: (valueId: Id) => ExtraProps;
-  /**
-   * A string className to use on the root of the resulting element.
-   */
-  readonly className?: string;
-  /**
-   * Whether a header row should be rendered at the top of the table, defaulting
-   * to `true`.
-   */
-  readonly headerRow?: boolean;
-  /**
-   * Whether an Id column should be rendered on the left of the table,
-   * defaulting to `true`.
-   */
-  readonly idColumn?: boolean;
 };
 
 export type WithSchemas<Schemas extends OptionalSchemas> = {
@@ -190,7 +302,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *
  * ```ts override
  * TableInHtmlTable(
- *   props: TableInHtmlTableProps,
+ *   props: TableInHtmlTableProps & HtmlTableProps,
  * ): ComponentReturnType;
  * ```
  *
@@ -201,11 +313,11 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * See the <TableInHtmlTable /> demo for this component in action.
  *
  * This component renders a Table by iterating over its Row objects. By default
- * these are in turn rendered with the RowInHtmlTr component, but you can
- * override this behavior by providing a `rowComponent` prop, a custom component
- * of your own that will render a Row based on RowProps. You can also pass
- * additional props to your custom component with the `getRowComponentProps`
- * callback prop.
+ * the Cells are in turn rendered with the CellView component, but you can
+ * override this behavior by providing a `component` for each Cell in the
+ * `customCells` prop. You can pass additional props to that custom component
+ * with the `getComponentProps` callback. See the CustomCell type for more
+ * details.
  *
  * This component uses the useRowIds hook under the covers, which means that any
  * changes to the structure of the Table will cause a re-render.
@@ -214,7 +326,6 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * appear in a <th> element at the top of the table, and the start of each row.
  * @param props The props for this component.
  * @returns A rendering of the Table in a <table> element.
- * @see <TableInHtmlTable /> demo
  * @example
  * This example creates a Provider context into which a default Store is
  * provided. The TableInHtmlTable component within it then renders the Table in
@@ -260,8 +371,9 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * @example
  * This example creates a Provider context into which a default Store is
  * provided. The TableInHtmlTable component within it then renders the Table
- * with a custom Row component and a custom props callback. The header row at
- * the top of the table and the Id column at the start of each row is removed.
+ * with a custom component and a custom props callback for the `species` Cell.
+ * The header row at the top of the table and the Id column at the start of each
+ * row is removed.
  *
  * ```jsx
  * const App = ({store}) => (
@@ -272,18 +384,24 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * const Pane = () => (
  *   <TableInHtmlTable
  *     tableId="pets"
- *     cellComponent={FormattedCellView}
- *     getCellComponentProps={(rowId, cellId) => ({bold: rowId == 'fido'})}
+ *     customCells={customCells}
  *     headerRow={false}
  *     idColumn={false}
  *   />
  * );
+ *
  * const FormattedCellView = ({tableId, rowId, cellId, bold}) => (
  *   <>
  *     {bold ? <b>{rowId}</b> : rowId}:
  *     <CellView tableId={tableId} rowId={rowId} cellId={cellId} />
  *   </>
  * );
+ * const customCells = {
+ *   species: {
+ *     component: FormattedCellView,
+ *     getComponentProps: (rowId, cellId) => ({bold: rowId == 'fido'}),
+ *   },
+ * };
  *
  * const store = createStore().setTable('pets', {
  *   fido: {species: 'dog'},
@@ -310,7 +428,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * @since v4.1.0
  */
   TableInHtmlTable: (
-    props: TableInHtmlTableProps<Schemas>,
+    props: TableInHtmlTableProps<Schemas> & HtmlTableProps,
   ) => ComponentReturnType;
 
   /**
@@ -322,7 +440,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *
  * ```ts override
  * SortedTableInHtmlTable(
- *   props: SortedTableInHtmlTableProps,
+ *   props: SortedTableInHtmlTableProps & HtmlTableProps,
  * ): ComponentReturnType;
  * ```
  *
@@ -335,12 +453,12 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *
  * See the <SortedTableInHtmlTable /> demo for this component in action.
  *
- * This component renders a Table by iterating over its Row objects, in the
- * order dictated by the sort parameters. By default these are in turn rendered
- * with the RowInHtmlTr component, but you can override this behavior by
- * providing a `rowComponent` prop, a custom component of your own that will
- * render a Row based on RowProps. You can also pass additional props to your
- * custom component with the `getRowComponentProps` callback prop.
+ * This component renders a ResultTable by iterating over its Row objects, in
+ * the order dictated by the sort parameters. By default the Cells are in turn
+ * rendered with the CellView component, but you can override this behavior by
+ * providing a `component` for each Cell in the `customCells` prop. You can pass
+ * additional props to that custom component with the `getComponentProps`
+ * callback. See the CustomCell type for more details.
  *
  * This component uses the useSortedRowIds hook under the covers, which means
  * that any changes to the structure or sorting of the Table will cause a
@@ -408,9 +526,9 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * @example
  * This example creates a Provider context into which a default Store is
  * provided. The SortedTableInHtmlTable component within it then renders the
- * Table with a custom Row component and a custom props callback. The header row
- * at the top of the table and the Id column at the start of each row is
- * removed.
+ * Table with a custom component and a custom props callback for the `species`
+ * Cell. The header row at the top of the table and the Id column at the start
+ * of each row is removed.
  *
  * ```jsx
  * const App = ({store}) => (
@@ -418,22 +536,29 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *     <Pane />
  *   </Provider>
  * );
+ *
  * const Pane = () => (
  *   <SortedTableInHtmlTable
  *     tableId="pets"
  *     cellId="species"
- *     cellComponent={FormattedCellView}
- *     getCellComponentProps={(rowId, cellId) => ({bold: rowId == 'fido'})}
+ *     customCells={customCells}
  *     headerRow={false}
  *     idColumn={false}
  *   />
  * );
+ *
  * const FormattedCellView = ({tableId, rowId, cellId, bold}) => (
  *   <>
  *     {bold ? <b>{rowId}</b> : rowId}:
  *     <CellView tableId={tableId} rowId={rowId} cellId={cellId} />
  *   </>
  * );
+ * const customCells = {
+ *   species: {
+ *     component: FormattedCellView,
+ *     getComponentProps: (rowId, cellId) => ({bold: rowId == 'fido'}),
+ *   },
+ * };
  *
  * const store = createStore().setTables({
  *   pets: {
@@ -462,7 +587,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * @since v4.1.0
  */
   SortedTableInHtmlTable: (
-    props: SortedTableInHtmlTableProps<Schemas>,
+    props: SortedTableInHtmlTableProps<Schemas> & HtmlTableProps,
   ) => ComponentReturnType;
 
   /**
@@ -474,7 +599,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *
  * ```ts override
  * ValuesInHtmlTable(
- *   props: ValuesInHtmlTableProps,
+ *   props: ValuesInHtmlTableProps & HtmlTableProps,
  * ): ComponentReturnType;
  * ```
  *
@@ -485,7 +610,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * See the <ValuesInHtmlTable /> demo for this component in action.
  *
  * This component renders a Store by iterating over its Value objects. By
- * default these are in turn rendered with the ValueInHtmlTr component, but you
+ * default the Values are in turn rendered with the ValueView component, but you
  * can override this behavior by providing a `valueComponent` prop, a custom
  * component of your own that will render a Value based on ValueProps. You can
  * also pass additional props to your custom component with the
@@ -585,6 +710,435 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * @since v4.1.0
  */
   ValuesInHtmlTable: (
-    props: ValuesInHtmlTableProps<Schemas>,
+    props: ValuesInHtmlTableProps<Schemas> & HtmlTableProps,
+  ) => ComponentReturnType;
+
+  /**
+ * The ResultTableInHtmlTable component renders the contents of a single query's
+ * ResultTable in a Queries object as an HTML <table> element, and registers a
+ * listener so that any changes to that result will cause a re-render.
+ *
+ * This has schema-based typing. The following is a simplified representation:
+ *
+ * ```ts override
+ * ResultTableInHtmlTable(
+ *   props: ResultTableInHtmlTableProps & HtmlTableProps,
+ * ): ComponentReturnType;
+ * ```
+ *
+ * The component's props identify which ResultTable to render based on query Id,
+ * and Queries object (which is either the default context Queries object, a
+ * named context Queries object, or by explicit reference).
+ *
+ * See the <ResultTableInHtmlTable /> demo for this component in action.
+ *
+ * This component renders a ResultTable by iterating over its Row objects. By
+ * default the Cells are in turn rendered with the CellView component, but you
+ * can override this behavior by providing a `component` for each Cell in the
+ * `customCells` prop. You can pass additional props to that custom
+ * component with the `getComponentProps` callback. See the ResultCustomCell
+ * type for more details.
+ *
+ * This component uses the useRowIds hook under the covers, which means that any
+ * changes to the structure of the Table will cause a re-render.
+ *
+ * You can use the `headerRow` and `idColumn` props to control whether the Ids
+ * appear in a <th> element at the top of the table, and the start of each row.
+ * @param props The props for this component.
+ * @returns A rendering of the ResultTable in a <table> element.
+ * @example
+ * This example creates a Provider context into which a default Queries object
+ * is provided. The ResultTableInHtmlTable component within it then renders the
+ * ResultTable in a <table> element with a CSS class.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <ResultTableInHtmlTable queryId="petColors" className="table" />
+ * );
+ *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
+ * console.log(app.innerHTML);
+ * // ->
+ * `
+ * <table class="table">
+ *   <thead>
+ *     <tr>
+ *       <th>Id</th>
+ *       <th>color</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     <tr>
+ *       <th>fido</th>
+ *       <td>brown</td>
+ *     </tr>
+ *     <tr>
+ *       <th>felix</th>
+ *       <td>black</td>
+ *     </tr>
+ *   </tbody>
+ * </table>
+ * `;
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Queries object
+ * is provided. The ResultTableInHtmlTable component within it then renders the
+ * ResultTable with a custom component and a custom props callback for the
+ * `color` Cell. The header row at the top of the table and the Id column at
+ * the start of each row is removed.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <ResultTableInHtmlTable
+ *     queryId="petColors"
+ *     customCells={customCells}
+ *     headerRow={false}
+ *     idColumn={false}
+ *   />
+ * );
+ *
+ * const FormattedResultCellView = ({queryId, rowId, cellId, bold}) => (
+ *   <>
+ *     {bold ? <b>{rowId}</b> : rowId}:
+ *     <ResultCellView queryId={queryId} rowId={rowId} cellId={cellId} />
+ *   </>
+ * );
+ * const customCells = {
+ *   color: {
+ *     component: FormattedResultCellView,
+ *     getComponentProps: (rowId, cellId) => ({bold: rowId == 'fido'}),
+ *   },
+ * };
+ *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
+ * console.log(app.innerHTML);
+ * // ->
+ * `
+ * <table>
+ *   <tbody>
+ *     <tr>
+ *       <td><b>fido</b>:brown</td>
+ *     </tr>
+ *     <tr>
+ *       <td>felix:black</td>
+ *     </tr>
+ *   </tbody>
+ * </table>
+ * `;
+ * ```
+ * @category Store components
+ * @since v4.1.0
+ */
+  ResultTableInHtmlTable: (
+    props: ResultTableInHtmlTableProps<Schemas> & HtmlTableProps,
+  ) => ComponentReturnType;
+
+  /**
+ * The SortedTableInHtmlTable component renders the contents of a single query's
+ * sorted ResultTable in a Queries object as an HTML <table> element, and
+ * registers a listener so that any changes to that result will cause a
+ * re-render.
+ *
+ * This has schema-based typing. The following is a simplified representation:
+ *
+ * ```ts override
+ * ResultSortedTableInHtmlTable(
+ *   props: ResultSortedTableInHtmlTableProps & HtmlTableProps,
+ * ): ComponentReturnType;
+ * ```
+ *
+ * The component's props identify which ResultTable to render based on query Id,
+ * and Queries object (which is either the default context Queries object, a
+ * named context Queries object, or by explicit reference). It also takes a Cell
+ * Id to sort by and a boolean to indicate that the sorting should be in
+ * descending order. The `offset` and `limit` props are used to paginate
+ * results, but default to `0` and `undefined` to return all available Row Ids
+ * if not specified.
+ *
+ * See the <ResultSortedTableInHtmlTable /> demo for this component in action.
+ *
+ * This component renders a ResultTable by iterating over its Row objects, in
+ * the order dictated by the sort parameters. By default the Cells are in turn
+ * rendered with the CellView component, but you can override this behavior by
+ * providing a `component` for each Cell in the `customCells` prop. You
+ * can pass additional props to that custom component with the
+ * `getComponentProps` callback. See the ResultCustomCell type for more details.
+ *
+ * This component uses the useSortedRowIds hook under the covers, which means
+ * that any changes to the structure or sorting of the ResultTable will cause a
+ * re-render.
+ *
+ * You can use the `headerRow` and `idColumn` props to control whether the Ids
+ * appear in a <th> element at the top of the table, and the start of each row.
+ *
+ * The `sortOnClick` prop makes the table's sorting interactive such that the
+ * user can click on a column heading to sort by that column. The style classes
+ * `sorted` and `ascending` (or `descending`) are added so that you can provide
+ * hints to the user how the sorting is being applied.
+ * @param props The props for this component.
+ * @returns A rendering of the ResultTable in a <table> element.
+ * @example
+ * This example creates a Provider context into which a default Queries object
+ * is provided. The ResultSortedTableInHtmlTable component within it then
+ * renders the ResultTable in a <table> element with a CSS class.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <ResultSortedTableInHtmlTable
+ *     queryId="petColors"
+ *     cellId="color"
+ *     className="table"
+ *   />
+ * );
+ *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
+ * console.log(app.innerHTML);
+ * // ->
+ * `
+ * <table class="table">
+ *   <thead>
+ *     <tr>
+ *       <th>Id</th>
+ *       <th class="sorted ascending">color</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     <tr>
+ *       <th>felix</th>
+ *       <td>black</td>
+ *     </tr>
+ *     <tr>
+ *       <th>fido</th>
+ *       <td>brown</td>
+ *     </tr>
+ *   </tbody>
+ * </table>
+ * `;
+ * ```
+ * @example
+ * This example creates a Provider context into which a default Queries object
+ * is provided. The ResultSortedTableInHtmlTable component within it then
+ * renders the ResultTable with a custom component and a custom props callback
+ * for the `color` Cell. The header row at the top of the table and the Id
+ * column at the start of each row is removed.
+ *
+ * ```jsx
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ *
+ * const Pane = () => (
+ *   <ResultSortedTableInHtmlTable
+ *     queryId="petColors"
+ *     cellId="color"
+ *     customCells={customCells}
+ *     headerRow={false}
+ *     idColumn={false}
+ *   />
+ * );
+ *
+ * const FormattedResultCellView = ({queryId, rowId, cellId, bold}) => (
+ *   <>
+ *     {bold ? <b>{rowId}</b> : rowId}:
+ *     <ResultCellView queryId={queryId} rowId={rowId} cellId={cellId} />
+ *   </>
+ * );
+ * const customCells = {
+ *   color: {
+ *     component: FormattedResultCellView,
+ *     getComponentProps: (rowId, cellId) => ({bold: rowId == 'fido'}),
+ *   },
+ * };
+ *
+ * const queries = createQueries(
+ *   createStore().setTable('pets', {
+ *     fido: {species: 'dog', color: 'brown'},
+ *     felix: {species: 'cat', color: 'black'},
+ *   }),
+ * ).setQueryDefinition('petColors', 'pets', ({select}) => select('color'));
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App queries={queries} />); // !act
+ * console.log(app.innerHTML);
+ * // ->
+ * `
+ * <table>
+ *   <tbody>
+ *     <tr>
+ *       <td>felix:black</td>
+ *     </tr>
+ *     <tr>
+ *       <td><b>fido</b>:brown</td>
+ *     </tr>
+ *   </tbody>
+ * </table>
+ * `;
+ * ```
+ * @category Store components
+ * @since v4.1.0
+ */
+  ResultSortedTableInHtmlTable: (
+    props: ResultSortedTableInHtmlTableProps<Schemas> & HtmlTableProps,
+  ) => ComponentReturnType;
+
+  /**
+ * The EditableCellView component renders the value of a single Cell in a way
+ * that can be edited in a web browser, and registers a listener so that any
+ * changes to that result will cause a re-render.
+ *
+ * This has schema-based typing. The following is a simplified representation:
+ *
+ * ```ts override
+ * EditableCellView(
+ *   props: CellProps & {readonly className?: string},
+ * ): ComponentReturnType;
+ * ```
+ *
+ * The component's props identify which Cell to render based on Table Id, Row
+ * Id, Cell Id, and Store (which is either the default context Store, a named
+ * context Store, or an explicit reference).
+ *
+ * A Cell contains a string, number, or boolean, so the value is rendered in an
+ * appropriate <input> tag and a button lets the user change type, if possible.
+ *
+ * This component uses the useCell hook under the covers, which means that any
+ * changes to the specified Cell outside of this component will cause a
+ * re-render.
+ *
+ * You can provide a custom className prop which well be used on the root of the
+ * resulting element. If omitted the element's class will be `editableCell`. The
+ * debugIds prop has no effect on this component.
+ * @param props The props for this component.
+ * @returns An editable rendering of the Cell.
+ * @example
+ * This example creates a Provider context into which a default Store is
+ * provided. The EditableCellView component within it then renders an editable
+ * Cell.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => (
+ *   <EditableCellView tableId="pets" rowId="fido" cellId="color" />
+ * );
+ *
+ * const store = createStore().setCell('pets', 'fido', 'color', 'brown');
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // ->
+ * `
+ * <div class="editableCell">
+ *   <button type="button" class="string">string</button>
+ *   <input value="brown">
+ * </div>
+ * `;
+ * ```
+ * @category Store components
+ * @since v4.1.0
+ */
+  EditableCellView: (
+    props: CellProps<Schemas> & {className?: string},
+  ) => ComponentReturnType;
+
+  /**
+ * The EditableValueView component renders the value of a single Value in a way
+ * that can be edited in a web browser, and registers a listener so that any
+ * changes to that result will cause a re-render.
+ *
+ * This has schema-based typing. The following is a simplified representation:
+ *
+ * ```ts override
+ * EditableValueView(
+ *   props: ValueProps & {readonly className?: string},
+ * ): ComponentReturnType;
+ * ```
+ *
+ * The component's props identify which Value to render based on Table Id, Row
+ * Id, Value Id, and Store (which is either the default context Store, a named
+ * context Store, or an explicit reference).
+ *
+ * A Value contains a string, number, or boolean, so the value is rendered in an
+ * appropriate <input> tag and a button lets the user change type, if possible.
+ *
+ * This component uses the useValue hook under the covers, which means that any
+ * changes to the specified Value outside of this component will cause a
+ * re-render.
+ *
+ * You can provide a custom className prop which well be used on the root of the
+ * resulting element. If omitted the element's class will be `editableValue`.
+ * The debugIds prop has no effect on this component.
+ * @param props The props for this component.
+ * @returns An editable rendering of the Value.
+ * @example
+ * This example creates a Provider context into which a default Store is
+ * provided. The EditableValueView component within it then renders an editable
+ * Value.
+ *
+ * ```jsx
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <Pane />
+ *   </Provider>
+ * );
+ * const Pane = () => <EditableValueView valueId="employees" />;
+ *
+ * const store = createStore().setValue('employees', 3);
+ * const app = document.createElement('div');
+ * ReactDOMClient.createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.innerHTML);
+ * // ->
+ * `
+ * <div class="editableValue">
+ *   <button type="button" class="number">number</button>
+ *   <input type="number" value="3">
+ * </div>
+ * `;
+ * ```
+ * @category Store components
+ * @since v4.1.0
+ */
+  EditableValueView: (
+    props: ValueProps<Schemas> & {className?: string},
   ) => ComponentReturnType;
 };