I'm making use of bootstrap-vue. Within the table component, I want my users to be able to sort values.
I set all the options for that but for some reason, the sorting isn't going as I espected.
I've checked the docs about sorting and set things up. My problem is, is that the following numbers (when sorted descending) are sorted like this:
856.780
832.912
827.873.000
Obviously, the last one is greater than the first two, but for some reason this doesn't work.
Now, the sorting does go right when I loose the punctuation, but that makes an ugly table for numbers.
Again, following the docs (see above) I'm making use of the sort-compare-options prop:
sortOptions: {
ignorePunctuation: true,
numeric: true
}
EDIT
My fields looke like this:
fields: [
{ key: 'name', sortable: true, tdClass: 'table-cell-align' },
{ key: 'revenue', sortable: true },
{ key: 'costs', sortable: true },
{ key: 'result', sortable: true },
{ key: 'margin', sortable: true },
{ key: 'fte', sortable: true },
{ key: 'personell_costs_/_revenue', sortable: true},
{ key: 'other_costs_/_revenue', sortable: true},
{ key: 'revenue_/_fte', sortable: true},
{ key: 'details', sortable: false }
]
[
{
"name": "Medical Tattoo Innovations",
"revenue": "34.254",
"costs": "38.010",
"result": "-4.414",
"fte": "0",
"margin": "0",
"personell_costs_\/_revenue": "0",
"other_costs_\/_revenue": "1",
"revenue_\/_fte": "171.270",
"details": "0"
}
]
But this doesn't do the trick for me.
Any thoughts on this?
827.873.000 is a string in your items data, not a Number (and since it has more than one decimal, the browser String.localCompare(...) method (used internally by b-table) does not see that as a valid number, so sorts it as a String.
You can either convert it to a number beforehand (but loose the extra decimal values), or set up a custom sort compare routine for those field columns.
https://bootstrap-vue.js.org/docs/components/table#sort-compare-routine
Your custom sort compare routine (which compares two rows), would need to deal with splitting the string into numerical parts and sort by those values.
Related
This is the table i am trying to make. First two columns are filled from get api. The last column, i fetch from another api get call. How do i fill the last column with data.
defineGrid() {
this.columnDefinitions = [
{ id: "SerialNumber", name: "Serial Number", field: "SerialNumber", sortable: true, filterable: true, minWidth: 100 },
.......
.......
.......
{ id: "Owner", name: "Owner", field: "Owner", sortable: true, filterable: true, minWidth: 100 },
];
Is there a way in aurelia-slickgrid to update an individual column with values (from a promise let’s say)?
I want to update the Owner column from a separate function that gets the data from backend system. I mean not the way how rest of the data is updated using dataset.bind=“dataset”.
I am having trouble sorting a data table on entry. My code:
$('#CommentsOnAuthors').DataTable({
ajax: {
url: '/authors_comments',
data: {
author_id: "#{author_id}",
book_id: "#{book_id}"
}
},
columns: [
{title: 'Date', data: 'created_at', type: 'date'},
{title: 'Book', data: 'book'},
{title: 'Author', data: 'author'},
{title: 'Comment', data: 'comment'}
],
order: [[1, 'desc']]
});
However, when the page loads, the second column (Book) is sorted in ascending order (and the down arrow for that column is bolded), not the first. If I click on the arrow of the first column (Date), it sorts it properly. I believe I am following the documentation. I would like the table to load, sorted by Date, in descending order. Any ideas?
The columns are zero-based, like arrays. So if you want to sort by the date you need to do
order: [[0, 'desc']]
How can I add custom filter options AND all the other data to a custom function?
Below is my code. I would like to have Yes and No filters, but also filters for all the other values in the column.
{column_number: creator_index,
filter_type: 'custom_func',
custom_func: Creator_Filter_Function,
data: [
{value: 'yes', label: 'Yes'},
{value: 'no', label: 'No'},
],
filter_default_label: "All"
},
You should use the append_data_to_table_data option for your filter
From docs:
append_data_to_table_data
Required: false
Type: string
Default value: undefined
Possible values: before / sorted
Description: Use 'before' to place your data array before the values that yadcf grabs from the table
use 'sorted' to place the data array sorted along with the values that yadcf grabs from the table
Note: 'sorted' option will have affect only if you data is an array of primitives (not objects)
So eventually your code will look like this
{
append_data_to_table_data: 'before',
column_number: creator_index,
filter_type: 'custom_func',
custom_func: Creator_Filter_Function,
data: [
{value: 'yes', label: 'Yes'},
{value: 'no', label: 'No'},
],
filter_default_label: "All"
},
While setting data into List grid. Some extra space is coming after last record.
isc.CustomListGrid.create({
dataSource: "DeviceDiscoveryDataSource",
ID:"deviceDiscoveryListGrid",
autoDraw: false,
//showAllRecords: true,
paddingAsLayoutMargin:false,
autoFitMaxRecords:2000,
showFilterEditor:true,
filterOnKeypress:true,
filterLocalData: true,
alternateRecordStyles:true,
autoFetchData:true,
showRecordComponents: true,
showRecordComponentsByCell: true,
cellHeight:35,
emptyCellValue:"-",
canSort:false,
canGroupBy:false,
canPickFields:true,
bodyProperties: { canSelectText:true },
fields: [{
name: "deviceName",
type: "text",
title: "Device Name",
align: "center",
width:200
}]
});
Where I am wrong I am not getting. Please Help me.
Try to set virtualScrolling property to false in the ListGrid. When rendering components in each row, SmartClient does not exactly know how much space it will need, hence the blank space after the last record.
More about this: http://www.smartclient.com/docs/10.0/a/b/c/go.html#attr..ListGrid.virtualScrolling
I've got datatables set up with about 10 columns, two of which do customized filtering when clicking the column headers.
I'd like to change the column header to reflect which filter is currently active.
To do it, I think I'll need to set up fnDrawCallback and look at the values returned by table.fnSettings()
My current code, trimmed to its essentials for this question:
var table = $('#units').dataTable({
"aaSorting": (popSearch) ? [[8,"asc"]] : [],
"aoColumns":[{ "bSortable": false },
{ "bSortable": false },
{ "asSorting": [ "", "on", "off", "occ", "none" ] },
null,
null,
{ "asSorting": [ "", "revised", "new" ] },
null,
null,
{ "bSortable": false },
{ "bSortable": false }
],
"oSearch": {"sSearch": searchString},
"sAjaxSource": "/system/units/data.php?1.4.3"
},
"fnDrawCallback": function() {
/* tweak column headers according to the asSorting value */
}
});
The asSorting arrays in the aoColumns array show the list of different filters that may be applied to the data being fed to datatables. If the third column header (Status) is clicked, I'd like its text to match what data was sent, (falling back to "status" if the empty string was sent). The filtering works, fine; I just want the header to reflect the applied filter.
In Datatables fnDrawCallback function, how do I know what values were sent for column sorting?
To enable which Column is being Sorted, and visually see it, all you should have to do is add the
"bSortClasses": true,
To your Data Tables Script. Such as:
"aaSorting": (popSearch) ? [[8,"asc"]] : [],
"bSortClasses": true,
...
You should see which column, is being used as the sorter. :)