JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Table › How can I hide a specific column with CSS only?
- This topic has 7 replies, 2 voices, and was last updated 3 years, 6 months ago by
fimarapp.
-
AuthorPosts
-
February 10, 2021 at 2:27 pm #101467
fimarapp
MemberDear 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!February 10, 2021 at 2:30 pm #101468admin
KeymasterHi 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/February 10, 2021 at 2:46 pm #101469fimarapp
MemberThank 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
}
}
})February 10, 2021 at 2:57 pm #101470admin
KeymasterDo you use the latest version?
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/February 10, 2021 at 4:48 pm #101471fimarapp
MemberYes, I think so,
“smart-webcomponents”: “^9.1.0”
Best Regards,
JohnnyFebruary 10, 2021 at 4:53 pm #101472fimarapp
MemberThis 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() } } })
February 11, 2021 at 6:11 am #101475admin
KeymasterHi,
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/February 11, 2021 at 6:39 pm #101486fimarapp
MemberHi Peter, awesome, thank you so much, straight to the point, it works!
Best regards!
Johnny -
AuthorPosts
- You must be logged in to reply to this topic.