Sorting a ReactTable based on a Switch being active - reactjs

Question

I need to sort a react table with the rows where a Switch is checked appearing at the top.
Here is the code I have so far.
import React from 'react';
import ReactTable from 'react-table';
import { useDispatch } from 'react-redux';
import { Switch } from '#material-ui/core';
import * as Actions from 'app/routes/actions/store/actions';
import { Pagination, FilterCaseInsensitive } from 'app/library';
export const PromotionControl = (props) => {
const dispatch = useDispatch();
const model = props.model;
const setModel = props.setModel;
const pageState = props.pageState;
const promotions = props.promotions;
function hasPromotion(promotion) {
if (model.actionPromotions === undefined)
return false;
const exists = model.actionPromotions.find(t => t.clientPromotionId === promotion.clientPromotionId);
return exists !== undefined;
}
function handlePromotionSelection(promotion) {
let selectedPromotions;
if (hasPromotion(promotion)) {
selectedPromotions = model.actionPromotions.filter(t =>
t.clientPromotionId !== promotion.clientPromotionId
);
}
else {
selectedPromotions = [...model.actionPromotions, {
clientPromotionId: promotion.clientPromotionId,
promotionName: promotion.promotionName
}];
}
setModel(values => ({ ...values, actionPromotions: selectedPromotions }));
}
return props.promotions.length <= 0 ? (<h5>No promotions configured.</h5>) : (
<React.Fragment>
<ReactTable
data={promotions}
PaginationComponent={Pagination}
defaultPageSize={5}
className="-striped -highlight"
minRows={0}
filterable={pageState.filterable}
sortable
filtered={pageState.filtered}
defaultFilterMethod={FilterCaseInsensitive}
onFilteredChange={(filtered) => dispatch(Actions.filterPromotions(filtered))}
columns={[
{
Header: "Client Promotion ID",
accessor: 'clientPromotionId',
width:200
},
{
Header: "Type",
accessor: 'promotionType',
maxWidth: 300
},
{
Header: "Name",
accessor: "promotionName"
},
{
maxWidth: 70,
style: { justifyContent: 'center' },
Cell: item => {
return (
<Switch
checked={hasPromotion(item.original)}
onClick={() => handlePromotionSelection(item.original)}
/>
)
}
}
]}
/>
</React.Fragment>
);
};
The column I want to sort the table by is the last column. At the moment the switch is checked based on the result of a check performed by the hasPromotion function. The issue is I don't know how to sort the whole table based on this column with the checked ones appearing at the top of the table.
Any ideas would be greatly appreciated.

Answer 1

As in Javascript, we have :
true - false === 1
false - true === -1
You could just base your sort on these values :
yourDataMatrix = yourDataMatrix.sort((a,b) => b.values[indexOfColumnToSort] - a.values[indexOfColumnToSort]);
Since I don't know the structure of your data, this code is not working, but you can use the logic in your code