Fix tests and refactor compareString

src/components/Table/__tests__/Table.sort.test.ts

@@ -75,6 +75,28 @@ describe('Table sort: Column type - "string', () => {
 		])
 	})
 
+	it('sorts columns with array values in correct ascending and correct descending order', () => {
+		const sorter = wrapper.find('thead').find('th').at(2)
+
+		const ascendingOrder = [
+			['apples, bananas'],
+			['blueberries, peaches'],
+			['mangoes, papayas'],
+			['nectarines, plums, raspberries'],
+			['oranges, pears']
+		]
+
+		// ascending order
+		sorter.simulate('click')
+		expect(renderedData(wrapper, 'description')).toEqual(ascendingOrder)
+
+		// descending order
+		sorter.simulate('click')
+		expect(renderedData(wrapper, 'description')).toEqual(
+			ascendingOrder.reverse()
+		)
+	})
+
 	it('sorts columns with missing cells in correct ascending and correct descending order', () => {
 		wrapper = mount(createTable<Client1>(mockData3))
 		const sorter = wrapper.find('.ant-table-column-has-sorters').first()

src/components/Table/__tests__/utils.test.tsx

@@ -64,6 +64,12 @@ describe('processColumns', () => {
 				showSorterTooltip: false,
 				sorter: expect.any(Function),
 				title: 'Age'
+			},
+			{
+				dataIndex: 'description',
+				showSorterTooltip: false,
+				sorter: expect.any(Function),
+				title: 'Description'
 			}
 		]
 
@@ -168,7 +174,12 @@ describe('processData', () => {
 
 describe('mapFilterKeys', () => {
 	it('returns all column keys that should be searched or filtered on', () => {
-		const mockFilteredKeys0 = ['_FORMATTED_DATA', 'name', 'age']
+		const mockFilteredKeys0 = [
+			'_FORMATTED_DATA',
+			'name',
+			'age',
+			'description'
+		]
 		const mockFilteredKeys2 = [
 			'_FORMATTED_DATA',
 			'name',

src/components/Table/fixtures/0_sample_data.ts

@@ -1,9 +1,10 @@
 import { ColumnType, ColumnTypes, TableProps } from '../.'
 
 export interface Person {
-	name: string[]
+	name: string
 	id: number | string
 	age: number
+	description: string[]
 }
 
 const { number, string } = ColumnTypes
@@ -18,34 +19,44 @@ const columns: ColumnType[] = [
 		dataIndex: 'age',
 		title: 'Age',
 		type: number
+	},
+	{
+		dataIndex: 'description',
+		title: 'Description',
+		type: string
 	}
 ]
 
 const data: Person[] = [
 	{
 		age: 36,
+		description: ['apples, bananas'],
 		id: 0,
-		name: ['Lorem', 'Ipsum']
+		name: 'Lorem'
 	},
 	{
 		age: 32,
+		description: ['oranges, pears'],
 		id: 1,
-		name: ['Ipsum']
+		name: 'Ipsum'
 	},
 	{
 		age: 45,
+		description: ['blueberries, peaches'],
 		id: 2,
-		name: ['Amet']
+		name: 'Amet'
 	},
 	{
 		age: 50,
+		description: ['nectarines, plums, raspberries'],
 		id: 3,
-		name: ['Elit']
+		name: 'Elit'
 	},
 	{
 		age: 22,
+		description: ['mangoes, papayas'],
 		id: 4,
-		name: ['Dolor']
+		name: 'Dolor'
 	}
 ]
 

src/components/Table/utils.tsx

@@ -193,16 +193,22 @@ const compareIcons =
 		return compareValA.localeCompare(compareValB)
 	}
 
+const getStrVal = (value?: string | string[]) => {
+	if (!value) return ''
+
+	return Array.isArray(value) ? value.join(', ') : value
+}
+
 /* 
   Compare functions used by applySort to pass a custom sorter
   based on data type and format.
  */
 function compareStrings(column: ColumnType) {
 	return (a: Record<string, any>, b: Record<string, any>) => {
-		const compareValA: string = a[column.dataIndex] || ''
-		const compareValB: string = b[column.dataIndex] || ''
+		const valA = getStrVal(a[column.dataIndex])
+		const valB = getStrVal(b[column.dataIndex])
 
-		return compareValA.localeCompare(compareValB)
+		return valA.localeCompare(valB)
 	}
 }