starting to implement sort props

src/examples/src/widgets/resource-grid/Basic.tsx

@@ -11,18 +11,41 @@ import {
 import TextInput from '@dojo/widgets/text-input';
 import cities, { City } from './cities';
 import List from '@dojo/widgets/list';
+import { parse } from 'path';
 
 const resource = createResourceMiddleware();
 
 const columns = [
-	{ id: 'city', title: 'city', sortable: true, filterable: true },
-	{ id: 'state', title: 'state', sortable: true, filterable: true },
+	{ id: 'city', title: 'city', sortable: 'string', filterable: true },
+	{ id: 'state', title: 'state', sortable: 'string', filterable: true },
 	{ id: 'growth_from_2000_to_2013', title: 'growth' },
 	{ id: 'map', title: 'map' },
-	{ id: 'population', title: 'population', sortable: true },
-	{ id: 'rank', title: 'rank', sortable: true }
+	{ id: 'population', title: 'population', sortable: 'number' },
+	{ id: 'rank', title: 'rank', sortable: 'number' }
 ];
 
+function defaultSort(data: City[], id: keyof City, type: 'string' | 'number', asc: boolean) {
+	if (type === 'string') {
+		return data.sort((a, b) => {
+			if (a[id] === b[id]) {
+				return 0;
+			}
+			if (asc) {
+				return a[id] > b[id] ? 1 : -1;
+			} else {
+				return a[id] > b[id] ? -1 : 1;
+			}
+		});
+	} else {
+		return data.sort((a, b) => {
+			const numA = +a[id];
+			const numB = +b[id];
+
+			return asc ? numA - numB : numB - numA;
+		});
+	}
+}
+
 const gridTemplate = createResourceTemplateWithInit<any, { data: City[] }>({
 	init: ({ data }, { put }) => {
 		put({ data, total: data.length }, { offset: 0, size: 30, query: {} });
@@ -32,14 +55,16 @@ const gridTemplate = createResourceTemplateWithInit<any, { data: City[] }>({
 		const { data } = get();
 		const { offset, size } = request;
 		const { __sort__: sort, ...queryFields } = request.query as {
-			__sort__: keyof City;
+			__sort__: any; // { id: keyof City; type: 'string' | 'number'; asc: boolean};
 			[key: string]: string;
 		};
 
 		const filteredData = Object.keys(queryFields).length
 			? data.filter((item) => item && defaultFilter(queryFields, item, 'contains'))
 			: data;
 
+		const sortedData = defaultSort(filteredData, sort.id, sort.type, sort.asc);
+
 		const sortedData = sort
 			? filteredData.sort((a, b) => {
 					if (a[sort] === b[sort]) {

src/resource-grid/index.tsx

@@ -13,7 +13,7 @@ export interface ColumnConfig {
 	id: string;
 	title: string;
 	filterable?: boolean;
-	sortable?: boolean;
+	sortable?: 'string' | 'number';
 	resizable?: boolean;
 }
 
@@ -173,7 +173,11 @@ export const Grid = factory(function Grid({
 							options({
 								query: {
 									...existingQuery,
-									__sort__: columnId
+									__sort__: {
+										id: columnId,
+										type: columns[columnId as any].sortable,
+										asc: true
+									}
 								}
 							});
 						}}
@@ -280,13 +284,14 @@ export interface HeaderRowProperties {
 	columns: ColumnConfig[];
 	onFilter(columnId: string, value: string): void;
 	onSort(columnId: string): void;
+	sort: { id: string; asc: boolean };
 }
 
 const headerRowFactory = create()
 	.properties<HeaderRowProperties>()
 	.children<GridChildren['header']>();
 const HeaderRow = headerRowFactory(function HeaderRow({ children, properties }) {
-	const { columns, onFilter, onSort } = properties();
+	const { columns, onFilter, onSort, sort } = properties();
 	const [headerRenderers = {}] = children();
 
 	return (
@@ -302,6 +307,7 @@ const HeaderRow = headerRowFactory(function HeaderRow({ children, properties })
 						onSort={() => {
 							onSort(column.id);
 						}}
+						sort={sort}
 					>
 						{headerCellRenderer}
 					</HeaderCell>
@@ -314,13 +320,14 @@ const HeaderRow = headerRowFactory(function HeaderRow({ children, properties })
 export interface HeaderCellProperties extends ColumnConfig {
 	onFilter(value: string): void;
 	onSort(): void;
+	sort: { id: string; asc: boolean };
 }
 
 const headerCellFactory = create()
 	.properties<HeaderCellProperties>()
 	.children<HeaderRenderer | undefined>();
 const HeaderCell = headerCellFactory(function HeaderCell({ children, properties }) {
-	const { filterable, title, onFilter, sortable, onSort } = properties();
+	const { filterable, title, onFilter, sortable, onSort, sort } = properties();
 	const [renderer] = children();
 	let content: RenderResult;