Option to disable hide / improved hide column API

[huntabyte]

I'm not able to see any options to disable the "hide" plugin for specific columns as we can for others, is this something on the roadmap? I may be able to submit a PR to support this.

I think it'd also be possible to expose a helper function that takes an id and toggles the hidden state of the column so it's cleaner.

[bryanmylee]

Hey @huntabyte! I figured that since the hidden column ids state was just a Writable<string[]>, it would provide you with the most flexibility in how you wanted to configure hidden columns.

Since the state is fully controlled by you, I didn't think you'd need a disable column option.

And I'm wary of adding more API to this library as it is getting a little ridiculous. My suggestion would be to do something in native "Svelte" like:

$hiddenColumnIds = toggle($hiddenColumnIds, 'idToToggle');

Of course, let me know if there's a better approach I should use!

[huntabyte]

I can definitely make it work, it just won't be as clean and consistent as it would if the disable option existed as it does for the other plugins.

For context, I'm trying to dynamically populate a dropdown menu consisting of checkbox menu items with the various columns that I'd want to allow the visibility to be toggled for, something like this:

If there was an option similar to the other plugins like:

table.column({
	header: "Amount",
	accessor: "amount",
	plugins: {
        hide: {
			disable: true
		}	
	}
}),

Then I could conditionally handle that a bit better, something like this:

Instead I have to create a config outside of the column configs with the ids I don't/do want to hide:

const hideable = ["status", "email", "amount"]

{#if hideable.includes(col.id)}
<!-- do something -->
{/if}

Really I was just hoping it'd be more consistent with the other APIs (selected, etc.), where I can also toggleColumnVisibilty() rather than having to hack together something for each table. Completely understand if this isn't something you'd want to introduce, but at least adding a disable property to the column config for that plugin would be incredible :)

It seems to already have a config object, just no acceptable properties at the moment:

[bryanmylee]

Ah gotcha, consistency is definitely something that'd be nice. I'll work on this for the next patch version.

[kuatroka]

Hi, what is the current option to have certain columns hidden by default? I tried to use the addHiddenColumns() option but it doesn't seem to work or maybe I'm using wrong syntax?

	const table = createTable(entries, {
		resize: addResizedColumns(),
		sort: addSortBy({
			serverSide: true,
			toggleOrder: ['desc', 'asc']
		}),
		page: addPagination({
			serverItemCount: writable(data[0].num_entries ),
			serverSide: true,
		}),
		filter: addTableFilter({
			serverSide: true,
			// fn: ({ filterValue, value }) => value.includes(filterValue)
		}),
		select: addSelectedRows(),
		hide: addHiddenColumns({ initialHiddenColumnIds: ['cik', 'cum_twrr_cons']})
	});

I'm using @huntabyte 's example of a table from 'shadcn-svelte'. His select option works, but by default it displays all the hideable columns even if I add a column to the 'addHiddenColumns' (as shown above) or manually to the hidden columns store

$hiddenColumnIds = ['cik', 'cum_twrr_cons'];

Thanks
P.S. I'm doing a server side approach. Not sure if it's relevant.

[kuatroka]

Ok, you can scratch all I said above. I found a way. For anyone who might need in the future. I changed the 'hideForId' var
and adde a list of columns to hide by default ['cik', 'cum_twrr_cons']

let hideForId = Object.fromEntries(ids.map((id) => [id, !['cik', 'cum_twrr_cons'].includes(id)]));

[kuatroka]

The approach above created another problem for me. Now if I want to use a column interactively and use its value in creating a URL to click on, it MUST be visible. This is usually impractical as for a URL/route construction one usually needs an id or code but in the table we only show a description of the product.
Any suggestions on how can I still access a value of a column even if it's hidden from being displayed? Thanks

[lewisjr]

In my scenario I made the data table as a component then customise it when i import it, so to have coloums hidden on init, I added the following to my DataTable.svelte:

export let preHiddenColumns: string[];

let hideForId = Object.fromEntries(
	ids.map((id) => (preHiddenColumns.includes(id) ? [id, false] : [id, true])),
);

Then in my component where I import it:

<script lang="ts">
import DataTable from "$lib/DataTable";
...
</script>

<DataTable preHiddenColumns={[ "address", "username" ]} {...otherVariables} />

[kuatroka]

Thanks @lewisjr , but I have already found a solution. It turns out there is an option row.original which lets you access the original data from the row independently if it's hidden or not. To access the column you do row.original.columnname.

Thanks
It can be closed