Create sorting in a blueprintjs table - html-table

Question

I want to make my columns sortable in terms of ascending and descending. The blueprintjs talks about how this is possible, but isn't exactly clear on the steps on how to implement it. I have a table I created in this format. I want to be able to sort the numbers ascending and descending. I attempted creating a menu and all, but nothing seemed to solve my probelm.
class DataTable extends Component {
renderCell = (rowIndex, colIndex) => {
return (
<Cell>
{rowIndex}
</Cell>
);
};
render() {
const { data } = this.props;
const { length } = data;
return (
<Table numRows={length} numFrozenColumns={1}>
<Column name="Campaign" cellRenderer={this.renderCell} />
<Column name="Date Sent" cellRenderer={this.renderCell} />
</Table>
);
}
}

Answer 1

Here you have one simple example. I hope it will help.
import { Column, ColumnHeaderCell, Table, Cell } from "#blueprintjs/table";
import { Menu, MenuItem } from "#blueprintjs/core";
export const SortableTable = () => {
const [items] = useState([
{ _id: 1, campaign: "L", email: "some1#test.com" },
{ _id: 2, campaign: "A", email: "some2#test.com" },
{ _id: 3, campaign: "V", email: "some3#test.com" }
]);
const cellRenderer = (rowIndex, type) => {
return <Cell>{items[rowIndex][type]}</Cell>;
};
const handleSortCampaignAsc = () => {
// todo sort asc
};
const handleSortCampaignDesc = () => {
// todo sort desc
};
const menuRenderer = (sortAsc, sortDesc) => (
<Menu>
<MenuItem icon="sort-asc" onClick={sortAsc} text="Sort Asc" />
<MenuItem icon="sort-desc" onClick={sortDesc} text="Sort Desc" />
</Menu>
);
const header = () => (
<ColumnHeaderCell
name="Campaign"
menuRenderer={menuRenderer(handleSortCampaignAsc, handleSortCampaignDesc)}
/>
);
return (
<Table numRows={items.length}>
<Column
columnHeaderCellRenderer={header}
cellRenderer={(rowIndex) => cellRenderer(rowIndex, "campaign")}
/>
<Column
name="Email"
cellRenderer={(rowIndex) => cellRenderer(rowIndex, "email")}
/>
</Table>
);
};
P.S. Don't forget to add dependencies for the icons.