Issue
I have table columns that I have sorted to have column key 'status' always on first order, then later i realized that i need to put checkbox before it, so now i have three conditions:
If only 'status' then it is first, if 'status' and 'checkbox' then status becomes second order, else if only 'checkbox' then first.
I have tried to add to my current working sort on 'status' but i haven't quite understood how exactly that sort compare works on two specific names:
config.tableColumns.sort((a, b) => {
if ((a.Key.toLowerCase() == 'checkbox' && a.Key.toLowerCase() != 'status')
|| (a.Key.toLowerCase() != 'checkbox' && a.Key.toLowerCase() == 'status')) {
return -1;
}
if (a.Key.toLowerCase() != 'checkbox' && a.Key.toLowerCase() != 'status') {
return 1;
}
const nameA = a.Key || '';
const nameB = b.Key || '';
return nameA.localeCompare(nameB);
});
Sample array :
_tableColumns: [
new TableColumns({ _key: 'Id', _prop: 'id', _name: 'Id', _visible: false, _order: 0, _type: "number", _filterable: false }),
new TableColumns({ _key: 'IntegrationId', _prop: 'integrationId', _name: 'IntegrationId', _visible: false, _order: 1, _type: "number", _filterable: false }),
new TableColumns({ _key: 'Status', _prop: 'status', _name: 'Status', _visible: true, _order: 2, _type: "text", _filterable: false }),
new TableColumns({ _key: 'Service', _prop: 'service', _name: 'Service', _visible: false, _order: 3, _type: "text", _filterable: false }),
new TableColumns({ _key: 'ContentProvider', _prop: 'contentProvider', _name: 'ContentProvider', _visible: false, _order: 4, _type: "text", _filterable: false }),
new TableColumns({ _key: 'PaymentGateway', _prop: 'paymentGateway', _name: 'PaymentGateway', _visible: false, _order: 5, _type: "text", _filterable: false }),
new TableColumns({ _key: 'Country', _prop: 'country', _name: 'Country', _visible: true, _order: 6, _type: "text", _filterable: false }),
new TableColumns({ _key: 'Operator', _prop: 'operator', _name: 'Operator', _visible: true, _order: 7, _type: "text", _filterable: false }),
new TableColumns({ _key: 'BillingType', _prop: 'billingType', _name: 'Billing Type', _visible: true, _order: 8, _type: "text", _filterable: false }),
new TableColumns({ _key: 'ContentCategory', _prop: 'contentCategory', _name: 'Content Category', _visible: false, _order: 9, _type: "text", _filterable: false }),
new TableColumns({ _key: 'ContentType', _prop: 'contentType', _name: 'Content Type', _visible: false, _order: 10, _type: "text", _filterable: false }),
new TableColumns({ _key: 'PricePointType', _prop: 'pricePointType', _name: 'Price Point Type', _visible: false, _order: 11, _type: "text", _filterable: false }),
new TableColumns({ _key: 'ServiceRate', _prop: 'serviceRate', _name: 'Service Rate', _visible: true, _order: 12, _type: "number", _filterable: false }),
new TableColumns({ _key: 'checkbox', _prop: 'checkbox', _name: '', _visible: true, _order: 13, _type: "checkbox", _filterable: false, _sortable: false }),
]
Expected is to change _order of key 'checkbox' to 0 and 'status' to 1 in that case
Any help would be appreciated. Thanks.
Solution
You could take an object with order of the wanted keys.
const
data = [{ _key: 'Id', _prop: 'id', _name: 'Id', _visible: false, _order: 0, _type: "number", _filterable: false }, { _key: 'IntegrationId', _prop: 'integrationId', _name: 'IntegrationId', _visible: false, _order: 1, _type: "number", _filterable: false }, { _key: 'Status', _prop: 'status', _name: 'Status', _visible: true, _order: 2, _type: "text", _filterable: false }, { _key: 'Service', _prop: 'service', _name: 'Service', _visible: false, _order: 3, _type: "text", _filterable: false }, { _key: 'ContentProvider', _prop: 'contentProvider', _name: 'ContentProvider', _visible: false, _order: 4, _type: "text", _filterable: false }, { _key: 'PaymentGateway', _prop: 'paymentGateway', _name: 'PaymentGateway', _visible: false, _order: 5, _type: "text", _filterable: false }, { _key: 'Country', _prop: 'country', _name: 'Country', _visible: true, _order: 6, _type: "text", _filterable: false }, { _key: 'Operator', _prop: 'operator', _name: 'Operator', _visible: true, _order: 7, _type: "text", _filterable: false }, { _key: 'BillingType', _prop: 'billingType', _name: 'Billing Type', _visible: true, _order: 8, _type: "text", _filterable: false }, { _key: 'ContentCategory', _prop: 'contentCategory', _name: 'Content Category', _visible: false, _order: 9, _type: "text", _filterable: false }, { _key: 'ContentType', _prop: 'contentType', _name: 'Content Type', _visible: false, _order: 10, _type: "text", _filterable: false }, { _key: 'PricePointType', _prop: 'pricePointType', _name: 'Price Point Type', _visible: false, _order: 11, _type: "text", _filterable: false }, { _key: 'ServiceRate', _prop: 'serviceRate', _name: 'Service Rate', _visible: true, _order: 12, _type: "number", _filterable: false }, { _key: 'checkbox', _prop: 'checkbox', _name: '', _visible: true, _order: 13, _type: "checkbox", _filterable: false, _sortable: false }],
order = { checkbox: 1, Status: 2, default: 3 };
data.sort((a, b) =>
(order[a._key] || order.default) - (order[b._key] || order.default) ||
(a._key || '').localeCompare(b._key || '')
);
console.log(data);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Answered By - Nina Scholz
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.