How can I hide a specific column with CSS only?

[fimarapp]

Dear great Team of Smart HTML Elements,
Hope you are doing well! Would like to know if it’s possible to apply CSS to my Smart Table? I would like to hide some columns, in next example i’m trying to hide id column, but it’s not possible.
.smart-table th[data-field=id], .smart-table td[data-field=id] {
display: none!important;
}
Any help will be really appreciated, Thank you so much for your time, help and support!

[admin]

Hi Johnny Johnny,
With CSS this is not possible. In the script code, you can use the Table column’s “visible” property and set it to false.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[fimarapp]

Thank you so much Peter, but probably I’m doing something wrong because it’s not working : (
columns =
[
{
“visible”: false,
“label”: “id”,
“dataField”: “id”,
“dataType”: “string”
},
{
“visible”: true,
“label”: “Birth”,
“dataField”: “birth”,
“dataType”: “date”
}
]
// Create table
Smart(‘#table’, class {
getproperties() {
return {
keyboardNavigation:true,
filtering:true,
sortMode:’one’,
selection,
paging:true,
freezeHeader:true,
virtualization:true,
dataSource:newSmart.DataAdapter({
dataSource:source, dataFields:fields }),
columns
}
}
})

[admin]

Do you use the latest version?
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[fimarapp]

Yes, I think so,
“smart-webcomponents”: “^9.1.0”
Best Regards,
Johnny

[fimarapp]

This is the full code:

const fields = [
  'id: string',
  'name: string',
  'surname: string'
]

  const get_columns = () =>
    fields.map(field => {
      const f = field.split(':')
      return {
        visible: f[0] == 'id' ? false : true,
        label: $_(f[0]),
        dataField: f[0],
        dataType: f[1].trim()
      }
    })
  onMount(() => {
    // Create table
    Smart('#table', class {
      get properties() {
        return {
          keyboardNavigation: true,
          filtering: true,
          sortMode: 'one',
          selection,
          paging: true,
          freezeHeader: true,
          virtualization: true,
          dataSource: new Smart.DataAdapter({
            dataSource: source, dataFields: fields }),
          columns: get_columns()
        }
      }
    })

[admin]

Hi,
It seems that in 9.1.0, the column property is “hidden”, not “visible. You can use it like that:

           columns: [
                { label: 'id', hidden: true, dataField: 'id', dataType: 'number' },
                { label: 'Product Name', dataField: 'productName', dataType: 'string' },
                { label: 'Quantity', dataField: 'quantity', dataType: 'number' },
                { label: 'Price', dataField: 'price', dataType: 'number' },
                { label: 'Date Purchased', dataField: 'date', dataType: 'date' }
            ]

After the next release, change it to “visible” and set it to false. “hidden” will be deprecated.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[fimarapp]

Hi Peter, awesome, thank you so much, straight to the point, it works!
Best regards!
Johnny

[Author]

Posts