question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

addResizedColumns plugin breaks if data store referenced multiple times in script functions without addHiddenColumns plugin

See original GitHub issue

The ability to resize columns breaks if you subscribe to the main data store more than once in separate functions and don’t also implement the addHiddenColumns plugin.

Problem

Here is an example in a REPL: https://svelte.dev/repl/71eb58bfe8754460926531cf211405da?version=3.49.0

Details: The REPL above is a clone of the ‘Simple Column Resizing’ REPL. The only difference is it adds two functions.

function read1() {
    console.log($data[0])
}
	
function read2() {
    console.log($data[1])
}

Just adding those functions completely breaks the resizing of columns. The functions don’t even have to be called. I haven’t yet figured out what causes them to break the resizing; though, I assume it has to do with how Svelte Headless Table manages the state of the resizing columns.

Workaround

By adding and implementing the addHiddenColumns plugin, the columns will resume resizing as expected.

Here is an example in a REPL: https://svelte.dev/repl/9c2868beb9ef4c0897ccdcab0dbfcda4?version=3.49.0

This is the code that has to be added:

import { addHiddenColumns, addResizedColumns } from 'svelte-headless-table/plugins';
const table = createTable(data, {
    hideColumns: addHiddenColumns(),
    resize: addResizedColumns(),
});
const {
    flatColumns,
    headerRows,
    pageRows,
    tableAttrs,
    tableBodyAttrs,
    visibleColumns,
    pluginStates,
} = table.createViewModel(columns);
	
const ids = flatColumns.map((c) => c.id);
	
const { hiddenColumnIds } = pluginStates.hideColumns;
let hideForId = Object.fromEntries(ids.map((id) => [id, false]));
$: $hiddenColumnIds = Object.entries(hideForId)
    .filter(([, hide]) => hide)
    .map(([id]) => id);

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
patrickhaertelcommented, Aug 6, 2022

It looks like this workaround also only works if you have

const { columnWidths } = pluginStates.resize;

and in the HTML

<pre>$columnWidths = {JSON.stringify($columnWidths, null, 2)}</pre>

I’m going to continue testing to see if I can find anything else out. (The addHiddenColumns plugin is still required in addition to the columnWidths object.)

0reactions
bryanmyleecommented, Sep 19, 2022

I’ll close this for now. Please feel free to re-open this if the issue persists.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Use Data Stores Across Multiple Models - MATLAB & Simulink
Model showing how to define, use, and log global data stores to share global data among referenced models.
Read more >
Function field - Product Documentation | ServiceNow
Create function fields and scripts in the Now Platform to perform common database transformations and calculations.
Read more >
Activity functions fire multiple times for same input and don't all ...
Our function app loads large amounts of data from a file and stores it to a database. We separate the records into batches...
Read more >
JQuery plugin not working when used multiple times in a page
The plugin works by running an internal function called SetupPlugin every time the browser width is below a breakpoint specified in a data...
Read more >
RequireJS API
There may be times when you do want to reference a script directly and not conform to the "baseUrl + paths" rules for...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found