addResizedColumns plugin breaks if data store referenced multiple times in script functions without addHiddenColumns plugin
See original GitHub issueThe 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:
- Created a year ago
- Comments:6 (4 by maintainers)
It looks like this workaround also only works if you have
and in the HTML
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.)
I’ll close this for now. Please feel free to re-open this if the issue persists.