useHasTableCell
The useHasTableCell
hook returns a boolean indicating whether a given Cell
exists anywhere in a Table
, not just in a specific Row
, and registers a listener so that any changes to that result will cause a re-render.
useHasTableCell(
tableId: Id,
cellId: Id,
storeOrStoreId?: any,
): boolean
Type | Description | |
---|---|---|
tableId | Id | |
cellId | Id | |
storeOrStoreId? | any | The |
returns | boolean |
A Provider
component is used to wrap part of an application in a context, and it can contain a default Store
or a set of Store
objects named by Id
. The useHasTableCell
hook lets you indicate which Store
to get data for: omit the optional parameter for the default context Store
, provide an Id
for a named context Store
, or provide a Store
explicitly by reference.
When first rendered, this hook will create a listener so that changes to the Table
will cause a re-render. When the component containing this hook is unmounted, the listener will be automatically removed.
Examples
This example creates a Store
outside the application, which is used in the useHasTableCell
hook by reference. A change to the data in the Store
re-renders the component.
const store = createStore().setCell('pets', 'fido', 'color', 'brown');
const App = () => (
<span>{JSON.stringify(useHasTableCell('pets', 'legs', store))}</span>
);
const app = document.createElement('div');
const root = ReactDOMClient.createRoot(app);
root.render(<App />);
console.log(app.innerHTML);
// -> '<span>false</span>'
store.setRow('pets', 'felix', {color: 'black', legs: 4});
console.log(app.innerHTML);
// -> '<span>true</span>'
This example creates a Provider context into which a default Store
is provided. A component within it then uses the useHasTableCell
hook.
const App = ({store}) => (
<Provider store={store}>
<Pane />
</Provider>
);
const Pane = () => (
<span>{JSON.stringify(useHasTableCell('pets', 'legs'))}</span>
);
const store = createStore().setCell('pets', 'fido', 'color', 'brown');
const app = document.createElement('div');
ReactDOMClient.createRoot(app).render(<App store={store} />);
console.log(app.innerHTML);
// -> '<span>false</span>'
This example creates a Provider context into which a Store
is provided, named by Id
. A component within it then uses the useHasTableCell
hook.
const App = ({store}) => (
<Provider storesById={{petStore: store}}>
<Pane />
</Provider>
);
const Pane = () => (
<span>
{JSON.stringify(useHasTableCell('pets', 'legs', 'petStore'))}
</span>
);
const store = createStore().setCell('pets', 'fido', 'color', 'brown');
const app = document.createElement('div');
ReactDOMClient.createRoot(app).render(<App store={store} />);
console.log(app.innerHTML);
// -> '<span>false</span>'
Since
v4.4.0