Help making type-safe table component with generic, defineSlots, and withDefaults

[vincerubinetti]

I'm trying to make a generic table component that the rest of my team, who are not frontend developers, can use easily, and have it provide helpful type hints and safety based on the column and row data passed in. At the moment, I'm just using any for types inside the component, and type assertions where using it, which is not great.

Some of this is TypeScript difficulty, some of it is issues with the new Vue 3.3 features. I think it's probably an inherently hard problem, but libraries like TanStack Table do it somehow. I'm not sure how they do it under the hood, and it might not be as ergonomic as I need it, but they do it.

Insights on how to solve any of my issues or recommendations for better approaches would be greatly appreciated.

What I want

The ideal usage of the component, with minimal configuration by the "consumer". The comments list the goals I'm trying to achieve.

<template>
  <AppTable :cols="cols" :rows="response">
    <!-- ideally, ts knows `anim` is valid slot name -->
    <template #anim="{ row, cell }">
      <!-- ts knows cell is `Animal` -->
      {{ cell }}
      <!-- ts knows row is `{ animal: Animal }` -->
      {{ row }}
    </template>
  </AppTable>
</template>

<script setup lang="ts">
// table column definitions
const cols = [
  {
    // slot name for how to render this col
    slotName: "anim",
    // key name to access on each row object
    rowKey: "animal",
  },
];

// some api call with typed response
type Animal = "cat" | "dog" | "elephant";
type Response = { animal: Animal }[];

// response data which becomes table data
const response: Response = [
  { animal: "cat" },
  { animal: "dog" },
  { animal: "elephant" },
];
</script>

What I've tried

How I think it would be implemented, and the issues I run into. Some comments show the type errors I get.

Relevant discussion: vuejs/rfcs#436

<template>
  <table :aria-colcount="cols.length" :aria-rowcount="rows.length">
    <!-- Property 'length' does not exist on type '[{ type: PropType<Rows>; required: true; }] extends [Prop<infer V, infer D>] ? unknown extends V ? IfAny<V, V, D> : V : { type: PropType<Rows>; required: true; }'. -->
    <thead>
      <tr>
        <th v-for="(col, colIndex) in cols" :key="colIndex">
          {{ col.heading }}
        </th>
      </tr>
    </thead>

    <tbody>
      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
        <td
          v-for="(col, colIndex) in cols"
          :key="colIndex"
          :aria-rowindex="rowIndex + 1"
          :aria-colindex="colIndex + 1"
        >
          <!-- Operator '+' cannot be applied to types 'keyof NonNullable<[{ type: PropType<Rows>; required: true; }] extends [Prop<infer V, infer D>] ? unknown extends V ? IfAny<V, V, D> : V : { type: PropType<...>; required: true; }>' and 'number'. -->
          <!-- if there is named slot that matches col slotName, use that to render cell -->
          <slot
            v-if="$slots[col.slotName]"
            :name="col.slotName"
            :row="row"
            :cell="col.rowKey ? row[col.rowKey] : {}"
          />
          <!-- Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ [name in SlotNames]: (props: {}) => any; }'. No index signature with a parameter of type 'string' was found on type '{ [name in SlotNames]: (props: {}) => any; }'. -->
          <!-- otherwise, just display raw cell value -->
          <template v-else-if="col.rowKey">
            {{ row[col.rowKey] }}
          </template>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<!-- wish i could put these types directly in setup script, but generic can't refer to them there -->
<script lang="ts">
type Col<Rows extends Row[]> = {
  slotName: string;
  rowKey: keyof Rows[number];
  heading: string;
};

type Row = Record<PropertyKey, unknown>;
</script>

<script setup lang="ts" generic="Rows extends Row[]">
type Cols = Col<Rows>[];

// tried doing the work-around from vuejs/rfcs/discussions/436 where you make Props a generic and have the same extends as the component generic, but it didn't help anything
type Props = {
  cols: Cols;
  rows: Rows;
};

withDefaults(defineProps<Props>(), {
  // withDefaults needed for other irrelevant options (e.g. table pagination) not shown here
  // vuejs/core/pull/8335 (merged in 3.3.2, i'm using 3.3.4) fixes a bug with generics and withDefaults. tried removing withDefaults just for the heck of it, but it didn't change anything. 
});

type SlotNames = Rows[number]["slotName"];

type SlotProps = {
  row: Rows[number];
  // no idea what i'm doing here...
  cell: Rows[number][Cols[number]["rowKey"]];
};

defineSlots<{ [name in SlotNames]: (props: SlotProps) => any }>();
// Type 'SlotNames' is not assignable to type 'string | number | symbol'.
</script>

[Shyam-Chen]

https://github.com/Shyam-Chen/Vue-Starter/blob/main/src/components/Table.vue

<script lang="ts" setup generic="T extends object">
import type { VNode } from 'vue';
import { reactive, watch, toRef } from 'vue';
import omit from 'lodash/omit';

import ProgressBar from './ProgressBar.vue';
import Button from './Button.vue';
import Select from './Select.vue';
import Checkbox from './Checkbox.vue';

const props = defineProps<{
  columns?: Array<{
    key: string;
    name: string;
    sticky?: string;
    sortable?: boolean;
    spanable?: boolean;
  }>;
  rows?: T[];
  count?: number;
  stickyHeader?: boolean;
  selectable?: boolean;
  selected?: T[];
  loading?: boolean;
}>();

const emit = defineEmits<{
  (evt: 'update:selected', val: T[]): void;
  (evt: 'change', val: { rows?: number; page?: number; field?: string; direction?: string }): void;
}>();

defineSlots<{
  thead(props: {}): VNode;
  [colKey: string]: (props: { row: T }) => VNode;
  spanable(props: {}): VNode;
}>();
</script>

[vincerubinetti]

This is very helpful, thank you! It helps me resolve pretty much all of the Vue-related generic type issues, and allows me to have a type for row.

Do you have any clever ideas how I could resolve these remaining issues:

type SlotNames = Cols<keyof Datum>[number]["id"];

type SlotProps = {
  col: Cols<keyof Datum>[number];
  row: Datum;
  // with my "dumb" solution below, cell is just a union of all the possible value types of any row object in the table
  // it would be great if i could get it typed based on the specific column
  // seems really hard because you'd have to find the current slot name in the list of cols, get the corresponding key, then use that to access Datum
  // i'm willing to restructure how my props work to accommodate this
  cell: Datum[keyof Datum]; 
};

defineSlots<{
  // i am able to use invalid slot names
  // might be a limitation of defineSlots and/or Volar
  [slot in SlotNames]: (props: SlotProps) => VNode;
}>();

[vincerubinetti]

Going to selfishly tag @mattpocock to see if he knows the answer to this. TL;DR:

// table React/Vue component
type Props<Datum extends object> = {
  cols: {
    // key of row object to access as value
    key: keyof Datum;
    // custom render function for cell
    render?: (cell: NoInfer<Datum[keyof Datum]>) => ReactNode;
  }[];
  rows: Datum[];
};

// usage in React/Vue template
<Table
  cols={[
    {
      key: "name",
    },
    {
      key: "money",
      render: (cell) => <div>{(cell as number).toLocaleString()}</div>,
      // can we avoid casting here? can we get cell type from passed rows?
      // i'm willing to restructure things significantly to accommodate this
    },
  ]}
  rows={[
    { name: "Jane", money: 1234567 },
    { name: "John", money: 7654321 },
  ]}
/>

[vincerubinetti]

Wow, I think this solution from StackOverflow I finally found actually works:
https://stackoverflow.com/questions/68274805/typescript-reference-type-of-property-by-other-property-of-same-object/68278790#68278790

type Col<Datum extends object, Key extends keyof Datum> = {
  key: Key;
  render?: (cell: Datum[Key]) => ReactNode;
};

type _Col<Datum extends object> = {
  [Key in keyof Datum]: Col<Datum, Key>;
}[keyof Datum];

type Props<Datum extends object> = {
  cols: _Col<Datum>[];
  rows: Datum[];
};

Then, in the same example, { key: "money", render: (cell) => <></> } leads to cell correctly having the type narrowed to just number!

[mattpocock]

An IIMT is the way to go:

https://www.totaltypescript.com/immediately-indexed-mapped-type

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wG4AocgeirhhQCMAbJRYmKgNQFdW1dIAOySCY5GAE8wrAAo4wAZwA8AFThIAHjBEATBXAgMAVkgwA+OAF44Ab3Jw4-JgoBccAMIQmqswG0AuhQOOADurnAqARQAvhTiUqye3mqa2oJ6BsamMBbWdg6+ANJwwIJwANZIEhCYEf5u+Q4VVW6FQU1E6UhQAPxuABRoSExMbpGF-gCUVhbI6DAAdHMYAHIQOkjtseTRvpXVtSqBlBtoTChEjhCCCvAqjCxuqupauvqGJub9YPLhchCKHzTSyzdhLdhrDZxVQPJD2K7OSw2XzwhyNJrNCRufCCFAgJD4AA0qLg0WJGPRTX22JA1yqRJJwV03QGQxGwIsSh0wAAbmYbGymAsYBAAGLADRIHT9SbRJRUbl88lNMnw-zReGhBRIlEUuC4-HYgBSKGERLgtOEWLgAEYAEwAZgALABWABsAHZScq0fq8UhjRAABaCc2WlpwD1ul1Oh12m3etUaqhmChAA