Data Table

Sort, filter, paginate 200 rows — one store, four independent subscribers. Zero unchanged <tr> nodes touched on sort.

Architecture

tableStore = o.createStore({ rows, sort, filter, page, pageSize, loading, error })

  tableStore.subscribe(filterBar,  'sync')  → search input + active filter badge
  tableStore.subscribe(sortHeader, 'sync')  → sort direction arrows only
  tableStore.subscribe(tableBody,  'sync')  → rows reorder via reconcile()
  tableStore.subscribe(pagination, 'sync')  → page controls only

One notify() → four regions update independently.
Sorting 200 rows: zero unchanged <tr> nodes touched.

Why Objs

React

// Re-runs entire table on every sort/filter
function Table({ rows, sort, filter }) {
  const sorted = useMemo(() =>
    [...rows].sort(...), [rows, sort]);
  const filtered = useMemo(() =>
    sorted.filter(...), [sorted, filter]);

  // Every <tr> re-rendered and diffed
  // even if its data didn't change
  return filtered.map(row =>
    <tr key={row.id}>...</tr>
  );
}

Objs

// reconcile() moves only DOM nodes
// that changed position — O(n) vs O(n²)
tableBody.sync = ({ self }) => {
  const sorted = applySort(
    tableStore.rows, tableStore.sort
  );
  self.reconcile(sorted.map(r => r.el));
};

// Four independent .sync() calls —
// pagination never re-renders rows,
// sort header never touches tbody.

objs-core on npm