Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

initialHiddenColumnIds not working #213

Open
eonward opened this issue Apr 13, 2024 · 2 comments
Open

initialHiddenColumnIds not working #213

eonward opened this issue Apr 13, 2024 · 2 comments

Comments

@eonward
Copy link

eonward commented Apr 13, 2024

In the config object passed to addHiddenColumns, setting initialHiddenColumnIds to an array of column id's should result in the specified columns to be hidden by default.

I wasn't able to get this functionality working in my application or the REPL.

To reproduce, go to the Kitchen Sink REPL and add the following:

  const table = createTable(data, {
    //...
    hideColumns: addHiddenColumns({
        initialHiddenColumnIds: ["age"]
    }),
    //...
  });

I'd expect the age column to be hidden by the time the component mounts. Any thoughts?


Update:
See @moalamri 's comment below for workaround!

@eonward eonward changed the title addHiddenColumns config's initialHiddenColumnIds not working initialHiddenColumnIds not working Apr 13, 2024
@moalamri
Copy link

Same issue here,
I was able to workaround this issue by setting the plugin state store of hidden columns right after creating view model

  const { pluginStates } = table.createViewModel(columns);
  const { hiddenColumnIds } = pluginStates.hideColumns;
  $hiddenColumnIds = ['age'];

Here's a working example:
https://svelte.dev/repl/68818d8f88594727a02179b7ac141dea?version=3.48.0

@moalamri
Copy link

moalamri commented Apr 19, 2024

I found the issue, this happens when this code is called

  const ids = flatColumns.map((c) => c.id);
  let hideForId = Object.fromEntries(ids.map((id) => [id, false]));
  $: $hiddenColumnIds = Object.entries(hideForId)
    .filter(([, hide]) => hide)
    .map(([id]) => id);

Basically, by using flatCloumns to get columns ids it will replace the existing hidden list initialHiddenColumnIds with the list of columns in flatColumns, which are all set to false.
You can check my previous example https://svelte.dev/repl/68818d8f88594727a02179b7ac141dea?version=3.48.0 by simply removing line 54. the initialHiddenColumnIds will still work.

After I have looked into the codebase, I think the hiddenColumnIds is derived from flatColumns but then returned as readable visibleColumns which should be used to set the reactive hiddenColumnIds

Here's an example of making an object and set the visibility based on visibleColumns
https://svelte.dev/repl/40fbdf15c34a40aea2b8f0e732adfdd6?version=3.48.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants