AlpineJS adapter

[marceloverdijk]

I was experimenting creating a AlpineJS adapter like:

import Alpine from 'alpinejs';
import {
  type RowData,
  type TableOptions,
  type TableOptionsResolved,
  createTable,
} from '@tanstack/table-core';

export const flexRender = <TProps extends object>(comp: any, props: TProps) => {
  if (typeof comp === 'function') {
    return comp(props)
  }
  return comp
}

export const useAlpineTable = <TData extends RowData>(
  options: TableOptions<TData>
) => {

  const resolvedOptions: TableOptionsResolved<TData> = {
    state: {},
    onStateChange: () => {}, // noop
    renderFallbackValue: null,
    ...options,
  }

  const table = createTable<TData>(resolvedOptions);

  const state = Alpine.reactive({
    ...table.initialState, 
    ...options.state,
  });

  Alpine.effect(() => {
    table.setOptions(prev => ({
      ...prev,
      ...options,
      state: {
        ...state,
        ...options.state,
      },
      onStateChange: updater => {
        console.log(state); // FOR DEBUG
        const nextState = updater instanceof Function ? updater(state) : updater;
        Object.assign(state, nextState);
        options.onStateChange?.(updater);
      },
    }))
  });

  return table;
}

It uses Alpine.reactive to make the state reactive.

and then on page create the table:

document.addEventListener('alpine:init', () => {
    Alpine.data('table', () => {
      const table = useAlpineTable({
        data: [...],
        columns: [
          {
            id: 'name',
            header: 'Name',
            accessorKey: 'name',
            enableSorting: true,
          },
        ],
        getCoreRowModel: getCoreRowModel(),
        getSortedRowModel: getSortedRowModel(),
      });      
      return {
        table,
        flexRender,
      }
    });
  });

and in the html:

<div x-data="table">
  <table>
    <thead>
      <template x-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
        <tr>
          <template x-for="header in headerGroup.headers" :key="header.id">
            <th
              :colspan="header.colSpan" 
              x-show="!header.isPlaceholder"
              @click="header.column.getToggleSortingHandler()?.($event)"
            >
              <span x-html="flexRender(header.column.columnDef.header, header.getContext())"></span>
              <span x-show="header.column.getIsSorted() === 'asc'"> 🔼</span>
              <span x-show="header.column.getIsSorted() === 'desc'"> 🔽</span>
            </th>
          </template>
        </tr>
      </template>
    </thead>
    <tbody>
      <template x-for="row in table.getRowModel().rows" :key="row.id">
        <tr>
          <template x-for="cell in row.getVisibleCells()" :key="cell.id">
            <td x-text="cell.getValue()"></td>
          </template>
        </tr>
      </template>
    </tbody>
  </table>
</div>

this nicely renders the table, and when clicking the header I see the internal sort is updated as well using the console.log.

However the table on the page is not sorted then, and it makes sense, as the table itself is not updated, and hence AlpineJS won't know it needs to be updated.

I wonder if somebody already did something similar, or anybody has some pointers if this could work with AlpineJS?
How to make AlpinJS re-render the table if the state changes...

Looking at Vue adapter source code I see the merge-proxy code and I wonder if something like that is needed (but honestly I don't know exactly what it does)... /cc @Mokshit06 @OlaAlsaker