feat: added drag handle icon when reordering

Author: ravgeetdhillon

src/DataTable/TableCol.tsx

@@ -4,6 +4,7 @@ import { CellExtended, CellProps } from './Cell';
 import NativeSortIcon from '../icons/NativeSortIcon';
 import { equalizeId } from './util';
 import { TableColumn, SortAction, SortOrder } from './types';
+import NativeReorderIcon from '../icons/NativeReorderIcon';
 
 interface ColumnStyleProps extends CellProps {
 	isDragging?: boolean;
@@ -175,6 +176,8 @@ function TableCol<T>({
 		<span className={[sortDirection, '__rdt_custom_sort_icon__'].join(' ')}>{sortIcon}</span>
 	);
 
+	const renderNativeReorderIcon = () => <NativeReorderIcon />;
+
 	const sortActive = !!(column.sortable && equalizeId(selectedColumn.id, column.id));
 	const disableSort = !column.sortable || disabled;
 	const nativeSortIconLeft = column.sortable && !sortIcon && !column.right;
@@ -217,6 +220,7 @@ function TableCol<T>({
 					sortActive={!disableSort && sortActive}
 					disabled={disableSort}
 				>
+					{column.reorder && renderNativeReorderIcon()}
 					{!disableSort && customSortIconRight && renderCustomSortIcon()}
 					{!disableSort && nativeSortIconRight && renderNativeSortIcon(sortActive)}
 

src/icons/NativeReorderIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = styled.span`
+	padding: 0px;
+	color: inherit;
+	flex-grow: 0;
+	flex-shrink: 0;
+	opacity: 0;
+	&:hover {
+		opacity: 1;
+	}
+`;
+
+// SVG taken from https://fontawesome.com/icons/grip-vertical?f=classic&s=solid
+const NativeReorderIcon: React.FC = ({}) => (
+	<Icon>
+		<svg width="10px" height="10px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+			<path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z" />
+		</svg>
+	</Icon>
+);
+
+export default NativeReorderIcon;