Set default Column Visibility to hidden

[pau1phi11ips]

It would be great to be able to set a column to be hidden by default but still available via the Choose Columns UI

eg.

 const columns = [
        { field: 'id', header: 'ID', editorType: 'text', visible: false },
        { field: 'name', header: 'Name', editorType: 'text' },
];

Currently doing this as a workaround

<SvGrid
       data={visible}
       {columns}
       ...
       onApiReady={(next) => {
              api = next;
              api.setColumnVisible('total_value', false);
       }}
/>

[bmarkov]

Thanks, the feature will be available very soon and it is very usable! Thank you for the feedback!

[bmarkov]

The feature is now part of the SvGrid v1.1.0. You should be able to set 'visible' to false when you define the data grid's columns. Thanks again for the feedback!

Please, do not hesitate to write again, if anything pops up.

[pau1phi11ips]

[bmarkov]

Yes, it was a typo :)

[pau1phi11ips]

I've got 1.1.0. What am I doing wrong here?

const columns: ColumnDef<typeof features, ClientAccountRow>[] = [
        { field: 'id', header: 'ID', editorType: 'text', width: 30, visible: false },

Getting visible does not exist in ColumnDef. Is that not the way I should be using it?

[bmarkov]

Nothing wrong on your side, we had it on the website, but it did not go in the npm through the workflow. Try the @svgrid/grid@1.1.1

const columns: ColumnDef<typeof features, Order>[] = [ { field: 'company', header: 'Company', editorType: 'text', width: 140, visible: false }, { field: 'product', header: 'Name', editorType: 'text', width: 170 }, { field: 'sellDate', header: 'Sell date', editorType: 'date', width: 110, format: { type: 'date', pattern: 'y-m-d' }, }, { field: 'inStock', header: 'In stock', editorType: 'checkbox', width: 90, }, { field: 'quantity', header: 'Quantity', editorType: 'number', width: 90, format: { type: 'number', options: { maximumFractionDigits: 0 } }, }, { field: 'orderId', header: 'Order ID', editorType: 'text', width: 130 }, { field: 'country', header: 'Country', editorType: 'text', width: 130 }, { field: 'price', header: 'Price', editorType: 'number', width: 100, format: { type: 'currency', currency: 'USD' }, }, ]

Demo: https://stackblitz.com/edit/vc5mkdxd-jt5ndjps?file=src%2FApp.svelte

[bmarkov]

Hi, wanted to check if everything is working correctly now on your side? Let me know if you experience any issue with the SvGrid or have a missing feature that you need.

[pau1phi11ips]

All good after the 1.1.1 change thanks. I'll let you know if I spot anything else.

I'm a long time user of https://datatables.net/, which is pretty mature and ordinarily would be my go to, but I'm currently rewriting some of our admin pages in Svelte so didn't want to use jQuery.

I'm pretty staggered by what you have in 1.1 tbh. Hats off!

[bmarkov]

We know Datatables and have to admit it's a very good and well-known product. Our jQuery Grid, similar to Datatables is jqxGrid (https://www.jqwidgets.com/).