Skip to content

UTable row data-selectable attribute not aligned with TanStack API #4968

@mkicks

Description

@mkicks

Environment

All environments

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.0.0-alpha.x

Version

v4.0.0-alpha.1

Reproduction

I'm quite sure that the issue is obvious and provided information is enough to understand the problem.

Description

Currently the UTable row data-selectable attribute is based on this

<tr :data-selectable="!!props.onSelect || !!props.onHover || !!props.onContextmenu">

I want to have some of the items in the table to be non-selectable (and inert to hover) and adjust styling accordingly via

// Desired
<UTable 
  :rowSelectionOptions="{ enableRowSelection: row => row.original.isDisabled }"
  :meta="{ class: { tr: row => row.getCanSelect() ? 'cursor-pointer' : 'bg-accented' } }" />

instead of

// Current workaround
<UTable
  :meta="{ class: {
     tr: row => (row.getCanSelect()
        ? 'cursor-pointer'
        : 'data-[selectable=true]:!bg-accented data-[selectable=true]:hover:!bg-accented'),
  } }"
/>

I understand the need to have some sensible defaults, but I propose changing this to

<tr :data-selectable="!!props.rowSelectionOptions?.enableRowSelection 
   ? row.getCanSelect() : !!props.onSelect || !!props.onHover || !!props.onContextmenu">

p.s. Many thanks for all this beautiful work you have done so far.

Additional context

No response

Logs

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingp3-lowMinor cosmetic, edge case, or documentation issuev4#4488

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions