[Proposal]: Add dynamic slots for KTable columns

[AlexVelezLl]

Product

KDS.

Desired behavior

I would like to be able to customize the contents of certain columns in a table using dynamic slots. For example:

We can pass an id to our headers array:

headers: [
  { label: 'Name', dataType: 'string' },
  { label: 'Age', dataType: 'numeric' },
  { label: 'City', dataType: 'string', id: "city" },
],

And for the columns that have that id we can add a slot with that name to have specific content for that column:

<KTable
  :headers="headers"
  :rows="rows"
  caption=""
  :sortable="false"
>
  <template #cell="{ content }">
    <span> {{ content }} </span>
  </template>
  <template #city="{ content }">
    <span>{{ content }} (City)</span>
  </template>
</KTable>

So if there is a column that has a dynamic slot, use that slot to render its content, otherwise use the default #cell.

Current behavior

Currently if I wanted custom content for the city column, I have to use the colIndex of that column:

<KTable
  :headers="headers"
  :rows="rows"
  caption=""
  :sortable="false"
>
  <template #cell="{ content, rowIndex, colIndex }">
    <span v-if="colIndex === 2">{ content } (City)</span>
    <span v-else>{ content }</span>
  </template>
</KTable>

The Value Add

This improves maintainability as if we change the position of the headers, or prepends any column, we wouldnt have to change the template or have to deal with counting which index corresponds to each attribute.

Possible Tradeoffs

We must find an effective way to communicate this in the api docs. Since it can be a bit confusing to have something like a dynamic slot in the slots table in the documentation.

[MisRob]

Nice proposal.

I'd even go as far as to make id required on all header items, rather than just adding it to the ones we want to use their corresponding named slot for. Otherwise I already see devs debugging why a named slot doesn't work, just to find out there's forgotten id :)