How to Highlight a Selected Row in n-data-table?

[factor200x]

Hello everyone,

I'm currently working on a project using Naive UI's n-data-table component. I'm trying to highlight a selected row when a user clicks on it. I've tried using the row-props attribute to dynamically set the class of the row, but I'm encountering issues.

Here's a snippet of what I've tried:

<n-data-table :row-props="(rowData) => ({ onClick: () => selectRow(rowData), class: selectedRow && selectedRow.value && rowData === selectedRow.value ? 'highlighted-row' : '' })" />

I've also tried using the rowClassName attribute, but it only triggers on load and not when a row is selected.

Has anyone successfully implemented row highlighting in n-data-table? Any guidance or suggestions would be greatly appreciated!

Thank you!

[cefiro]

Hi!

The code below creates the ability to select (checkbox) a table row by clicking on any cell.

You can modify it to highlight by adding HTML classes directly to the selector of the cell row of the table

<n-data-table
    v-model:checked-row-keys="checkedRowKeysRef"
    :row-props="changeRowProps"
  />

const checkedRowKeysRef = ref<Array<string | number>>([]);
const changeRowProps = (rowData) => {
        return {
          onClick: (e: PointerEvent) => {
            const el = e.target as HTMLElement;

            if (el.tagName === 'TD') {
              const tr = el.parentNode as HTMLElement;
              if (tr.tagName === 'TR') {
                if (tr.querySelector('.n-data-table-td--selection .n-checkbox--disabled')) {
                  return;
                }
              }
              if (typeof props.rowKey === 'function') {
                const currentRowKey = props.rowKey.bind(null, rowData)();
                if (currentRowKey && checkedRowKeysRef.value.includes(currentRowKey)) {
                  checkedRowKeysRef.value = checkedRowKeysRef.value.filter((i) => i !== currentRowKey);
                } else {
                  checkedRowKeysRef.value.push(currentRowKey);
                }
              }
            }
          },
        };
}

[factor200x]

Hi,

that helped me a lot!

Thank you very much
Olaf