Is there a way to return the ids of rows instead of indexes when using the select plugin?

[isaacfink]

pretty much the title, I am trying to get the ids of all the rows selected, is there a way pass a string for the plugin to use as a key for the id? so instead of getting this back

[
   {index:boolean}
]

i would get something like this

[
   {string:boolean}
]

until now I was mapping it to the real ids by checking the index against the original data store but now I implemented sub rows which means the indexes won't match up, writing this I looked at the result of selecting a subrow and i see it's handled well but it still leaves a lot of work for me to do, I think mapping the index to an id on the library level would be a better solution

[isaacfink]

I added this option

{
	rowDataId: (row) => row.id
}

to table.createViewModel but I still have the same issue with subrows

[bryanmylee]

I must have missed this use case and not transformed the IDs for subrows. I'll look into fixing this by the week, or if you'd like to help you can contribute changes to the addSubRows plugin.

[Tihomir971]

Hi, I have same question. In my data there is field id (not shown in table). How to get selectedDataIds with id not row number?

[bryanmylee]

Hmm, rowDataId should be filling the data ids which should mean selectedDataIds returns your row.id. This is probably a bug with addSubRows.

Can I confirm you're using sub rows with addSubRows and not addGroupBy?

[Tihomir971]

I'm not using subrows or group by. Just regular flat table

[Tihomir971]

I fix it with

rowDataId: (row) => row.id.toString()

[shyakadavis]

Hello, @isaacfink, @Tihomir971, @bryanmylee (sorry for the pings)

But I couldn't figure out the solution from your suggestions.

Anyone mind sharing a detailed snippet? I would appreciate the help.

[shyakadavis]

🤦🏽‍♂️

Re-read the above conversations, (slowly this time), and figured it out.

// where you're configuring everything
...
const table_model = table.createViewModel(columns, { rowDataId: (row) => row.id });
...

[patra0o]

Hi @shyakadavis, would you mind sharing a snippet?

[shyakadavis]

Hello, @patra0o

It's something like:

<script lang="ts">
	import { get, writable } from 'svelte/store';
	import { Render, Subscribe, createRender, createTable } from 'svelte-headless-table';
	import * as Table from '$lib/components/ui/table';
	import {
		addColumnFilters,
		addHiddenColumns,
		addPagination,
		addSelectedRows,
		addSortBy,
		addTableFilter
	} from 'svelte-headless-table/plugins';

	import DataTableCheckbox from './data-table-checkbox.svelte';
	import DataTableColumnHeader from './data-table-column-header.svelte';
	import DataTableDateCell from './data-table-date-cell.svelte';
	import DataTableFoundersCell from './data-table-founders-cell.svelte';
	import DataTableNameCell from './data-table-name-cell.svelte';
	import DataTablePagination from './data-table-pagination.svelte';
	import DataTableRowActions from './data-table-row-actions.svelte';
	import DataTableStatusCell from './data-table-status-cell.svelte';
	import DataTableToolbar from './data-table-toolbar.svelte';
	import DataTableThumbnailCell from './data-table-thumbnail-cell.svelte';

	export let data;

	// https://github.com/bryanmylee/svelte-headless-table/discussions/105#discussioncomment-4928758
	const projects = writable(data.projects);
	// Update the `projects` store whenever `data.projects` changes.
	$: $projects = data.projects;

	const table = createTable(projects, {
		select: addSelectedRows(),
		sort: addSortBy({
			toggleOrder: ['asc', 'desc']
		}),
		page: addPagination({ initialPageSize: 5 }),
		filter: addTableFilter({
			fn: ({ filterValue, value }) => {
				return value.toLowerCase().includes(filterValue.toLowerCase());
			}
		}),
		colFilter: addColumnFilters(),
		hide: addHiddenColumns()
	});

	const columns = table.createColumns([
		table.display({
			id: 'select',
			header: (_, { pluginStates }) => {
				const { allPageRowsSelected } = pluginStates.select;
				return createRender(DataTableCheckbox, {
					checked: allPageRowsSelected,
					'aria-label': 'Select all'
				});
			},
			cell: ({ row }, { pluginStates }) => {
				const { getRowState } = pluginStates.select;
				const { isSelected } = getRowState(row);
				return createRender(DataTableCheckbox, {
					checked: isSelected,
					'aria-label': 'Select row',
					class: 'translate-y-[2px]'
				});
			},
			plugins: { sort: { disable: true } }
		}),
		table.column({
			accessor: (item) => {
				return {
					name: item.name,
					collection_id: item.collectionId,
					record_id: item.id,
					file_name: item.thumbnail
				};
			},
			header: 'Thumbnail',
			id: 'thumbnail',
			cell: ({ value }) => {
				return createRender(DataTableThumbnailCell, { thumbnail: value });
			},
			plugins: { sort: { disable: true } }
		}),
		table.column({
			accessor: 'name',
			header: 'Name',
			id: 'name',
			cell: ({ value, row }) => {
				if (row.isData()) {
					return createRender(DataTableNameCell, { name: value });
				}
				return value;
			}
		}),
		table.column({
			accessor: 'created',
			header: 'Created',
			id: 'created',
			cell: ({ value, row }) => {
				if (row.isData()) {
					return createRender(DataTableDateCell, { created: value });
				}
				return value;
			}
		}),
		table.column({
			// Thank God for this: https://github.com/bryanmylee/svelte-headless-table/issues/127
			accessor: (item) => (item.expand?.stage ? item.expand.stage.name : ''),
			header: 'Stage',
			id: 'stage',
			cell: ({ value }) => {
				return createRender(DataTableStatusCell, { name: value });
			},
			plugins: {
				colFilter: {
					fn: ({ filterValue, value }) => {
						if (filterValue.length === 0) return true;
						if (!Array.isArray(filterValue) || typeof value !== 'string') return true;
						return filterValue.some((filter) => {
							return value.includes(filter);
						});
					},
					initialFilterValue: [],
					render: ({ filterValue }) => {
						return get(filterValue);
					}
				}
			}
		}),
		table.column({
			// Thank God for this: https://github.com/bryanmylee/svelte-headless-table/issues/127
			accessor: (item) => (item.expand?.user ? item.expand.user : []),
			id: 'user',
			header: 'Founder(s)',
			cell: ({ value }) => {
				return createRender(DataTableFoundersCell, { users: value });
			},
			plugins: { sort: { disable: true } }
		}),
		table.display({
			id: 'actions',
			header: () => {
				return '';
			},
			cell: ({ row }) => {
				if (row.isData() && row.original) {
					return createRender(DataTableRowActions, { id: row.original.id });
				}
				return '';
			}
		})
	]);

--	const table_model = table.createViewModel(columns);
++  const table_model = table.createViewModel(columns, { rowDataId: (row) => row.id });

	const { headerRows, pageRows, tableAttrs, tableBodyAttrs } = table_model;
</script>

[patra0o]

Super mate! Thank you!

[yoshimatsudev]

thread saved my night, cheers