Working with Vue 2.7.x Composition API

[dombavetta]

Has anyone been able to get this to work with the Vue 2 composition API? I was able to directly copy and paste the vue adapter code (Proxy and all) into a vue 2 project using the composition API and everything I've tested works fine (sorting, paging, etc...). However, when using a ref for the data option, any updates to the data ref cause the watchEffect handler to loop infinitely. I would love to gain Vue 2 support but I haven't managed to find a way around this.

<script lang="ts">
import {
  defineComponent,
  ref,
  watch,
  watchEffect,
} from '@vue/composition-api'; // or 'vue' if version >= 2.7 & < 3
import { mergeObject } from '~/app/components/ui/table/next/core/merge';
// These exports are the exact same code found in @tanstack/table/vue with import references from `[email protected]` update to use `@vue/composition-api`
import {
  createColumnHelper,
  getCoreRowModel,
  TableOptions,
  useVueTable,
  FlexRender,
  SortingState,
  getSortedRowModel,
  Header,
  getPaginationRowModel,
} from '~/app/components/ui/table/next/core/use-table';

type Person = {
  firstName: string;
  lastName: string;
  age: number;
  visits: number;
  status: string;
  progress: number;
};

const columnHelper = createColumnHelper<Person>();

export default defineComponent({
  name: 'TestPage',
  components: {
    FlexRender,
  },
  setup() {
    const defaultData: Person[] = [
      {
        firstName: 'tanner',
        lastName: 'linsley',
        age: 24,
        visits: 100,
        status: 'In Relationship',
        progress: 50,
      },
      {
        firstName: 'tandy',
        lastName: 'miller',
        age: 40,
        visits: 40,
        status: 'Single',
        progress: 80,
      },
      {
        firstName: 'joe',
        lastName: 'dirte',
        age: 45,
        visits: 20,
        status: 'Complicated',
        progress: 10,
      },
    ];

    const columns = [
      columnHelper.accessor('firstName', {
        cell: (info) => info.getValue(),
        header: () => 'First Name',
        footer: (props) => props.column.id,
      }),
      columnHelper.accessor('lastName', {
        cell: (info) => info.getValue(),
        header: () => 'Last Name',
        footer: (props) => props.column.id,
      }),
      columnHelper.accessor('age', {
        header: () => 'Age',
        footer: (props) => props.column.id,
      }),
      columnHelper.accessor('visits', {
        header: () => 'Visits',
        footer: (props) => props.column.id,
      }),
      columnHelper.accessor('status', {
        header: 'Status',
        footer: (props) => props.column.id,
      }),
      columnHelper.accessor('progress', {
        header: 'Profile Progress',
        footer: (props) => props.column.id,
      }),
    ];

    const data = ref(defaultData);
    const sorting = ref<SortingState>([]);

    const INITIAL_PAGE_INDEX = 0;
    const goToPageNumber = ref(INITIAL_PAGE_INDEX + 1);
    const pageSizes = [1, 3, 5, 10];

    const options: TableOptions<Person> = {
      columns,
      // data: data.value,
      get data() {
        return data.value;
      },
      state: {
        get sorting() {
          return sorting.value;
        },
      },
      onSortingChange(updaterOrValue) {
        sorting.value =
          typeof updaterOrValue === 'function'
            ? updaterOrValue(sorting.value)
            : updaterOrValue;
      },
      getCoreRowModel: getCoreRowModel(),
      getSortedRowModel: getSortedRowModel(),
      getPaginationRowModel: getPaginationRowModel(),
    };
    const table = useVueTable(options);

    // watch(data, (newData) => {
    //   console.log('watch data');
    //   table.setOptions((prev) => {
    //     return mergeObject<TableOptions<Person>>(prev, { data: newData });
    //   });
    // });

    const rerender = () => {
      data.value = defaultData;
    };

    const addData = () => {
      console.log('add data before', table.options.data.length);

      // This causes the `watchEffect` in use-table to loop
      data.value.push({
        firstName: 'joe',
        lastName: 'dirte',
        age: 45,
        visits: 20,
        status: 'Complicated',
        progress: 10,
      });

      console.log('add data after', table.options.data.length);
    };

    function onSortHeaderClicked(
      header: Header<Person, unknown>,
      event: PointerEvent
    ) {
      const sortHandler = header.column.getToggleSortingHandler();
      if (!sortHandler) throw new Error('No sort handler...');
      sortHandler(event);
    }

    function handleGoToPage(e: PointerEvent) {
      const page = (e.target as any).value
        ? Number((e.target as any).value) - 1
        : 0;
      goToPageNumber.value = page + 1;
      table.setPageIndex(page);
    }

    function handlePageSizeChange(e: PointerEvent) {
      table.setPageSize(Number((e.target as any).value));
    }

    return {
      table,
      rerender,
      addData,

      sorting,
      onSortHeaderClicked,

      goToPageNumber,
      pageSizes,
      handleGoToPage,
      handlePageSizeChange,
    };
  },
});
</script>

[pathai-scasarotto]

Did you end up having any success with getting this to work with vue 2?

[dombavetta]

I was never able to get through this so ended up abandoning. I did however find success porting nuxt-uis table component over to vue 2 composition api. It supports pagination, sorting, etc.. I can share that implementation if you are interested. (It's styled via tailwind but that could be easily replaced if needed)

[pathai-scasarotto]

Really appreciate the reply. I think for now I am going to push forward trying to write my own adapter for vue 2 and see where that lands me.

[pathai-scasarotto]

Just wanted to loop back here and share what I got working.

// Such a silly hack to not get a new element
const createTextVNode = (text: string) => h('span', text).children?.[0];

/**
 * Vue 2 Compatible version of `FlexRender`
 *
 * Props:
 * - `render` {any} - A function, component, string or number
 * - `props` {object} - Props to pass to the render function or component
 */
export const FlexRender = defineComponent({
  name: 'FlexRender',
  // eslint-disable-next-line vue/require-prop-types
  props: ['render', 'props'],
  setup: props => () => {
    if (typeof props.render === 'function') {
      const rendered = props.render(props.props);

      // If it is a VNODE we have to wrap it in a function
      if (typeof rendered === 'object') {
        return rendered;
      }

      return createTextVNode(rendered);
    }

    if (typeof props.render === 'object') {
      return h(props.render, props.props);
    }

    return createTextVNode(props.render);
  },
});

/**
 * Vue 2 reactivity wrapper around TanStack Table Core `createTable`
 *
 * @param {MaybeRef<TableOptions<TData>>} options - The table options
 * @returns {ShallowRef<Table<TData>>} - The table instance
 *
 * @example
 *
 * ```ts
 * // Simple usage with a static data set and no controlled state
 * const table = useVueTable({
 *   getCoreRowModel: getCoreRowModel(),
 *   data,
 *   columns,
 * });
 *
 * // Usage with controlled state
 * const table = useVueTable(computed(() => ({
 *  getCoreRowModel: getCoreRowModel(),
 *  data: data.value,
 *  columns,
 * })));
 * ```
 */
export const useVueTable = <TData extends RowData>(
  options: MaybeRef<TableOptions<TData>>,
) => {
  const optionsRef = computed(() => unref(options));
  const resolvedOptions: TableOptionsResolved<TData> = {
    state: {}, // Dummy state
    onStateChange: () => {}, // noop
    renderFallbackValue: null,
    ...optionsRef.value,
  };

  // There is some hacky stuff happening here to force vue to re-render the table.
  // Hopefully this only has to live until we reach vue 3 and we can go to using the
  // public vue package.
  const internalTable = createTable<TData>(resolvedOptions);
  const table = shallowRef(internalTable);
  const state = shallowRef(internalTable.initialState);

  watch(
    [optionsRef, state],
    ([optionsVal, stateVal]) => {
      internalTable.setOptions(prev => ({
        ...prev,
        ...optionsVal,
        state: {
          ...stateVal,
          ...optionsVal.state,
        },
        onStateChange: updater => {
          if (typeof updater === 'function') {
            state.value = updater(stateVal);
          } else {
            state.value = updater;
          }

          optionsVal.onStateChange?.(updater);
        },
      }));

      // Force rerender
      table.value = { ...internalTable };
    },
    { immediate: true },
  );

  return table;
};

The only other thing worth mentioning is that I found that you have to spread the props into FlexRender to get the state inside FlexRender to rerender. Ex:

<FlexRender
  :render="cell.column.columnDef.cell"
  :props="{ ...header.getContext() }"
/>

[dombavetta]

Awesome work and thanks for the update! I may try to work your implementation back into our solution. It's bound to help someone else out as well.