Semantic UI Sortable Table, are they any class/tag that I can exclude some column to be sortable.
Such as Action Button column which should be have sorting disabled.
Semantic UI Tables
Please advice, thank you.
Add the class no-sort class to the th
I looked at the javascript at
https://semantic-ui.com/javascript/library/tablesort.js
And saw the line
this.$sortCells = this.$thead.length > 0 ? this.$thead.find('th:not(.no-sort)') : this.$table.find('th:not(.no-sort)');
Related
I am using nz-table component of NG-ZORRO in my angular 11 App. I want instant search functionality when user type in the textbox.
Here is UI where I used the nz-table
I know there is column level filter option in NG-ZORRO as per their documentation .
But didn't find the functionality like this what I am looking for.
Any idea if there is way to do this.
You can add the filter property (nzFilterChange) on your th tag. For example :
filterChange(search: string) {
// You can do the job here
}
<th (nzFilterChange)="filterChange($event)">Header</th>
I am using wenzhixin bootstrap table with server side pagination. My table has two special column(First column for row Guid row id, Second column include two button for each cell)
My problem is, I should hide first column content because I don't want to see all Guid id by Users. Moreover, My table data coming with server side pagination. I couldn't button with html code for second column.
How can I add custom column for server side pagination or how can I add attribute to all cells in the first or second column?
To hide a column, you can use either JavaScript command after the bootstrapTable('load',..) if you used that, or in a document ready block:
$table.bootstrapTable('hideColumn', 'name')
shown on Bootstrap-Table site: bootstrap-table.com: showColumn-hideCoulumn
or if defining within the table, add data-visible="false" to the column you wish to hide.
bootstrap-table.com: column-options visible
i.e.
<table id="table"
data-toggle="table"... >
<thead>
<tr>
<th data-field="id" data-visible="false" >ID</th>
For the buttons - I am not sure what type of project this is for - but I solved this by adding link buttons to the table rows via data-formatter - read up on this on the API documentation bootstrap-table.com/docs/api/column-options/#formatter
I used the examples found on github.com/wenzhixin/bootstrap-table/issues/1765 - under Format -> 'Basic Format' - which shows how to add a link (button via Bootstrap CSS). To make the link specific to a row, use row[] to get a field value, or you can even use the id column instead of hiding it, if that is your field (use 'value' instead of row[] then - see examples).
I did mine something like:
<th data-formatter="buttonFormatter">View Links</th>
then in the javascript <script> block:
function buttonFormatter(value, row, index) {
var id= row["id"];
var url = "https:/...&id=" + id;
return 'View';
}
These are based roughly on stuff I've been doing recently - haven't tested these examples, but should give you a good start if you haven't already figured it out...
I want to save the list of hidden columns so that next time when the table is loaded I show the table with the same set of column which the user chose to see in the past. Is there a way to get a list of all hidden columns in bootstrap-table library.
You can use the cookie extension to solve your problem, here is an example: http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/cookie.html.
The plugin saves:
Sort order
Page number
Page number from the list
Visible columns
Search text
Docs here: http://bootstrap-table.wenzhixin.net.cn/extensions/#table-cookie
you can use the jquery datatables plugin to easily handle this problem, this plugin auto generate the table columns and show that.
you will get more information from link below,
https://www.datatables.net/
hope it helps.
try this below
var tab = $('#table').bootstrapTable('getHiddenColumns');
$.each(tab, function(index, value) {
alert(value.title);
})
How can I make a condition in Kendo UI grid using angularjs which will check an integer from the table and in relation with this (if 1 then some class, if 2 then some other class..) apply the class on the cell where is the integer located?
created a fiddle for the same,check if this helps:
http://jsfiddle.net/Sowjanya51/krszen9a/
I have used if-else,you can use switch too for conditional.
if(this.innerText=='1')
It seems jqGrid is not assigning any CSS ids to cells by default.
Any tips how to go about it?
I notice I can assign classes per column as per the wiki, but I would like to add CSS ids.
Why jqGrid schould assign an additional CSS class for every cell if jqGrid not use the class? If you need to add a CSS class to some jqGrid cells you can use setCell method.
$("#list").jqGrid('setCell', id, colName, '', "someCssClass");
See modified demo for this old answer as an example.