EditableCellView

EditableCellView(
  this: void,
  internals: Brand<"ComponentInternals">,
  props: (
    CellViewProps &
    {
      className?: string;
      showType?: boolean;
    }
  ),
): {
  $on?: (type: string, callback: (e: any) => void): () => void;
  $set?: (props: Partial<(
    CellViewProps &
    {
      className?: string;
      showType?: boolean;
    }
  )>): void;
}

See the <EditableCellView /> (Svelte) demo for this component in action.

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, boolean, object or array (since v8.0) so the value is rendered in an appropriate <input> tag, possibly as JSON and a button lets the user cycle through the types.

Set the showType prop to false to remove the ability for the user to see or change the Cell type. They will also not be able to change the type if there is a TablesSchema applied to the Store.

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.

<script>
  import {Provider} from 'tinybase/ui-svelte';
  import {EditableCellView} from 'tinybase/ui-svelte-dom';

  export let store;
</script>

<Provider {store}>
  <EditableCellView tableId="pets" rowId="fido" cellId="color" />
</Provider>

import {flushSync, mount} from 'svelte';
import {createStore} from 'tinybase';
import App from './App.svelte';

const store = createStore().setCell('pets', 'fido', 'color', 'brown');
const app = document.body.appendChild(document.createElement('div'));
flushSync(() => mount(App, {target: app, props: {store}}));
console.log(app.innerHTML);
// ->
`
<div class="editableCell">
  <button title="string" class="string">string</button>
  <input value="brown">
</div>
`;