ApiTablesProvider
Per-table Redux isolation and global remount behavior
File: ./ApiTables/ApiTablesProvider.tsx
Purpose
Wraps table UI in a dedicated Redux store so multiple tables on one page never share selection, filters, or data.
Implementation
export default function ApiTablesProvider({ children }: { children: React.ReactNode }) {
const { outScopeTableRefresher } = useSelector((state: any) => state?.app);
const tableStore = useMemo(() => createTableStore(), []);
return (
<div key={outScopeTableRefresher}>
<Provider store={tableStore}>{children}</Provider>
</div>
);
}useMemo(() => createTableStore(), [])
Store is created once per provider mount. When the wrapper div remounts (key change), a new store is created.
key={outScopeTableRefresher}
Subscribes to the global app slice counter. When _triggerOutscopeTableRefresher runs anywhere in the app, the key changes → full remount → fresh table state.
Use this when mutations happen outside the table (e.g. add product modal on the same page) and you need a clean re-init, not just POST query refresh.
Usage
Always via ReactApiTable — do not mount Provider manually unless you have a special case.
<ReactApiTable table={structure} tableStructureLoading={loading} />Children passed to ReactApiTable render inside the provider before the controller.
Global selector caveat
useSelector for state.app runs in the parent React tree (global Redux), not the table store. The provider component must render under the app’s root Provider from @/store/store.