EditableCellView

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.

EditableCellView(props: CellProps & {
  className?: string;
  showType?: boolean;
}): ComponentReturnType

See the <EditableCellView /> 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, or boolean, so the value is rendered in an appropriate <input> tag and a button lets the user change type, if possible.

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.

import {EditableCellView} from 'tinybase/ui-react-dom';
import {Provider} from 'tinybase/ui-react';
import React from 'react';
import {createRoot} from 'react-dom/client';
import {createStore} from 'tinybase';

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');
createRoot(app).render(<App store={store} />);
console.log(app.innerHTML);
// ->
`
<div class="editableCell">
  <button class="string">string</button>
  <input value="brown">
</div>
`;