Add support for custom HTML data-* attributes on table rows (<tr> elements)

Package

v4.x

Description

Extend the meta prop to support an attrs property that accepts either an object or a function returning custom HTML attributes (similar to how class currently works):

type TableMeta<T> = {
  class?: {
    tr?: string | ((row: Row<T>) => string)
  }
  style?: {
    tr?: CSSProperties | ((row: Row<T>) => CSSProperties)
  }
  attrs?: {
    tr?: Record<string, string | number | boolean> | ((row: Row<T>) => Record<string, string | number | boolean>)
  }
}

Usage example:

<script setup lang="ts">
import type { TableMeta } from '@tanstack/vue-table'

type Payment = {
  id: string
  status: string
  priority: number
}

const data = ref<Payment[]>([...])
const columns = [...]

const meta: TableMeta<Payment> = {
  class: {
    tr: (row) => row.original.status === 'paid' ? 'row-paid' : ''
  },
  attrs: {
    tr: (row) => ({
      'data-payment-id': row.original.id,
      'data-status': row.original.status,
      'data-priority': row.original.priority,
      'data-testid': `payment-row-${row.original.id}`,
      'aria-label': `Payment ${row.original.id} - ${row.original.status}`
    })
  }
}
</script>

<template>
  <UTable 
    :data="data" 
    :columns="columns" 
    :meta="meta"
  />
</template>

This would render:

<tr 
  class="row-paid" 
  data-payment-id="4600" 
  data-status="paid"
  data-priority="1"
  data-testid="payment-row-4600"
  aria-label="Payment 4600 - paid"
>
  <!-- cells -->
</tr>

Additional context

No response

Locate the table component's TableMeta type and the code that renders table rows from the meta class and style options. Trace how the tr values are applied, then add the attrs option for object and row-based function values and verify that the requested data-* and ARIA attributes appear on rendered rows.