1import React from 'react';
2import doc from './sortFunction.mdx';
3import data from '../../constants/sampleMovieData';
4import DataTable from '../../../src/index';
5
6const customSort = (rows, selector, direction) => {
7	return rows.sort((a, b) => {
8		// use the selector to resolve your field names by passing the sort comparators
9		const aField = selector(a).toLowerCase();
10		const bField = selector(b).toLowerCase();
11
12		let comparison = 0;
13
14		if (aField > bField) {
15			comparison = 1;
16		} else if (aField < bField) {
17			comparison = -1;
18		}
19
20		return direction === 'desc' ? comparison * -1 : comparison;
21	});
22};
23
24const columns = [
25	{
26		name: 'Title',
27		selector: row => row.title,
28		sortable: true,
29	},
30	{
31		name: 'Director',
32		selector: row => row.director,
33		sortable: true,
34	},
35	{
36		name: 'Year',
37		selector: row => row.year,
38		sortable: true,
39	},
40];
41
42export const CustomSort = () => {
43	return <DataTable title="Movie List" columns={columns} data={data} sortFunction={customSort} pagination />;
44};
45
46export default {
47	title: 'Sorting/Custom Sort',
48	component: CustomSort,
49	parameters: {
50		docs: {
51			page: doc,
52		},
53	},
54};