react-wasm-table
  • English

      • Event Middleware

      The eventMiddleware prop accepts an array of middleware functions. Each receives (channel, event, next). Call next() to continue the chain, or skip it to block the event entirely (including user callbacks and internal handlers).

      Grid API

      Middleware Log
      Click cells or headers to see middleware in action...
      Active middleware (1): Logger
      Tip: Enable the blocker middleware and block headerClick — sorting will stop working because the middleware blocks the event before it reaches the internal sort handler.

      Code

      const middleware: EventMiddleware[] = [
  // Timing middleware
  (channel, event, next) => {
    const start = performance.now();
    next();
    console.log(`${channel}: ${performance.now() - start}ms`);
  },
  // Logger middleware
  (channel, event, next) => {
    console.log("event:", channel);
    next();
  },
  // Blocker middleware
  (channel, event, next) => {
    if (["headerClick"].includes(channel)) return; // skip next() to block
    next();
  },
];

<Grid data={data} columns={columns} eventMiddleware={middleware} />;

      Table API Code

      const middleware: EventMiddleware[] = [
  (channel, event, next) => {
    console.log("event:", channel);
    next(); // call next() to continue, or skip to block
  },
];

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  state: { sorting },
  onSortingChange: setSorting,
});

<Table table={table} width={560} height={480} eventMiddleware={middleware}>
  <Thead>
    {table.getHeaderGroups().map((hg) => (
      <Tr key={hg.id}>
        {hg.headers.map((h) => (
          <Th key={h.id} colSpan={h.colSpan}>
            {h.isPlaceholder ? null : flexRender(h.column.columnDef.header, h.getContext())}
          </Th>
        ))}
      </Tr>
    ))}
  </Thead>
  <Tbody>
    {table.getRowModel().rows.map((row) => (
      <Tr key={row.id}>
        {row.getVisibleCells().map((cell) => (
          <Td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Td>
        ))}
      </Tr>
    ))}
  </Tbody>
</Table>;