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

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

@@ -15,33 +15,54 @@ import {
   CellProps,
   ComponentReturnType,
   ExtraProps,
+  QueriesOrQueriesId,
+  ResultCellProps,
   StoreOrStoreId,
   ValueProps,
 } from './ui-react';
 import {Id, Ids} from './common';
 import {ComponentType} from 'react';
 
-// TableInHtmlTableProps
-export type TableInHtmlTableProps = {
+// CustomCell
+export type CustomCell = {
   /**
-   * The Id of the Table in the Store to be rendered.
+   * An optional string that will be used as the label at the top of the table
+   * column for this Cell.
    */
-  readonly tableId: Id;
+  readonly label?: string;
   /**
-   * The Store to be accessed: omit for the default context Store, provide an Id
-   * for a named context Store, or provide an explicit reference.
+   * An optional custom component for rendering each Cell in the Table (to
+   * override the default CellView component).
    */
-  readonly store?: StoreOrStoreId;
+  readonly component?: ComponentType<CellProps>;
   /**
-   * A custom component for rendering each Cell in the Table (to override the
-   * default CellView component).
+   * An optional function for generating extra props for each custom Cell
+   * component based on Row and Cell Id.
    */
-  readonly cellComponent?: ComponentType<CellProps>;
+  readonly getComponentProps?: (rowId: Id, cellId: Id) => ExtraProps;
+};
+
+// CustomResultCell
+export type CustomResultCell = {
   /**
-   * A function for generating extra props for each custom Cell component based
-   * on its Id.
+   * An optional string that will be used as the label at the top of the table
+   * column for this Cell.
    */
-  readonly getCellComponentProps?: (rowId: Id, cellId: Id) => ExtraProps;
+  readonly label?: string;
+  /**
+   * An optional custom component for rendering each Cell in the ResultTable (to
+   * override the default ResultCellView component).
+   */
+  readonly component?: ComponentType<ResultCellProps>;
+  /**
+   * 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.
    */
@@ -56,11 +77,33 @@ export type TableInHtmlTableProps = {
    * defaulting to `true`.
    */
   readonly idColumn?: boolean;
+};
+
+// TableInHtmlTableProps
+export type TableInHtmlTableProps = {
+  /**
+   * The Id of the Table in the Store to be rendered.
+   */
+  readonly tableId: Id;
+  /**
+   * The Store to be accessed: omit for the default context Store, provide an Id
+   * for a named context Store, or provide an explicit reference.
+   */
+  readonly store?: StoreOrStoreId;
+  /**
+   * 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 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?: Ids;
+  readonly customCells?: Ids | {[cellId: Id]: string | CustomCell};
 };
 
 // SortedTableInHtmlTableProps
@@ -92,34 +135,87 @@ export type SortedTableInHtmlTableProps = {
    */
   readonly store?: StoreOrStoreId;
   /**
-   * A custom component for rendering each Cell in the Table (to override the
-   * default CellView component).
+   * 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 cellComponent?: ComponentType<CellProps>;
+  readonly editable?: boolean;
   /**
-   * A function for generating extra props for each custom Cell component based
-   * on its Id.
+   * An optional list of Cell Ids to use for rendering a prescribed set of the
+   * 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 getCellComponentProps?: (rowId: Id, cellId: Id) => ExtraProps;
+  readonly customCells?: Ids | {[cellId: Id]: string | CustomCell};
   /**
-   * A string className to use on the root of the resulting element.
+   * Whether the table should be interactive such that clicking a header changes
+   * the sorting and/or direction.
    */
-  readonly className?: string;
+  readonly sortOnClick?: boolean;
+};
+
+// ResultTableInHtmlTableProps
+export type ResultTableInHtmlTableProps = {
   /**
-   * Whether a header row should be rendered at the top of the table, defaulting
-   * to `true`.
+   * The Id of the query in the Queries object for which the ResultTable will be
+   * rendered.
    */
-  readonly headerRow?: boolean;
+  readonly queryId: Id;
   /**
-   * Whether an Id column should be rendered on the left of the table,
-   * defaulting to `true`.
+   * 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 idColumn?: boolean;
+  readonly queries?: QueriesOrQueriesId;
+  /**
+   * 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};
+};
+
+// ResultSortedTableInHtmlTableProps
+export type ResultSortedTableInHtmlTableProps = {
+  /**
+   * 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;
   /**
    * An optional list of Cell Ids to use for rendering a prescribed set of the
-   * Row's Cells in a given order.
+   * 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 customCellIds?: Ids;
+  readonly customCells?: Ids | {[cellId: Id]: string | CustomResultCell};
   /**
    * Whether the table should be interactive such that clicking a header changes
    * the sorting and/or direction.
@@ -134,6 +230,12 @@ export type ValuesInHtmlTableProps = {
    * for a named context Store, or provide an explicit reference.
    */
   readonly store?: StoreOrStoreId;
+  /**
+   * 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).
@@ -144,20 +246,6 @@ export type ValuesInHtmlTableProps = {
    * 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;
 };
 
 /**
@@ -172,11 +260,11 @@ export type ValuesInHtmlTableProps = {
  * 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.
@@ -185,7 +273,6 @@ export type ValuesInHtmlTableProps = {
  * 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
@@ -231,8 +318,9 @@ export type ValuesInHtmlTableProps = {
  * @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}) => (
@@ -243,18 +331,24 @@ export type ValuesInHtmlTableProps = {
  * 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'},
@@ -281,7 +375,7 @@ export type ValuesInHtmlTableProps = {
  * @since v4.1.0
  */
 export function TableInHtmlTable(
-  props: TableInHtmlTableProps,
+  props: TableInHtmlTableProps & HtmlTableProps,
 ): ComponentReturnType;
 
 /**
@@ -298,12 +392,12 @@ export function TableInHtmlTable(
  *
  * 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
@@ -371,9 +465,9 @@ export function TableInHtmlTable(
  * @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}) => (
@@ -381,22 +475,29 @@ export function TableInHtmlTable(
  *     <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: {
@@ -425,7 +526,7 @@ export function TableInHtmlTable(
  * @since v4.1.0
  */
 export function SortedTableInHtmlTable(
-  props: SortedTableInHtmlTableProps,
+  props: SortedTableInHtmlTableProps & HtmlTableProps,
 ): ComponentReturnType;
 
 /**
@@ -440,7 +541,7 @@ export function SortedTableInHtmlTable(
  * 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
@@ -540,5 +641,402 @@ export function SortedTableInHtmlTable(
  * @since v4.1.0
  */
 export function ValuesInHtmlTable(
-  props: ValuesInHtmlTableProps,
+  props: ValuesInHtmlTableProps & 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.
+ *
+ * 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
+ */
+export function ResultTableInHtmlTable(
+  props: ResultTableInHtmlTableProps & 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.
+ *
+ * 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
+ */
+export function ResultSortedTableInHtmlTable(
+  props: ResultSortedTableInHtmlTableProps & 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.
+ *
+ * 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
+ */
+export function EditableCellView(
+  props: CellProps & {readonly 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.
+ *
+ * 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
+ */
+export function EditableValueView(
+  props: ValueProps & {readonly className?: string},
 ): ComponentReturnType;