Add unsortable to DataTable

package.json

@@ -2,7 +2,7 @@
   "name": "@weng-lab/psychscreen-ui-components",
   "description": "Typescript and Material UI based components used for psychSCREEN",
   "author": "SCREEN Team @ UMass Chan Medical School",
-  "version": "0.8.0-a.1",
+  "version": "0.8.0-a.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/components/DataTable/datatable.tsx

@@ -303,8 +303,8 @@ const DataTable: React.FC<DataTableProps<any>> = (props: DataTableProps<any>) =>
               <TableHead>
                 <TableRow>
                   {state.columns.map((column, i) => (
-                    <TableCell  key={`${column.header}${i}`} onClick={() => {
-                      dispatch({ type: "sortChanged", sortColumn: i });
+                    <TableCell key={`${column.header}${i}`} onClick={() => {
+                      !column.unsortable && dispatch({ type: "sortChanged", sortColumn: i });
                       setPage(0);
                       }}>
                       <TableSortLabel active={i === state.sort.column} direction={state.sort.asc ? "asc" : "desc"}>
@@ -342,7 +342,7 @@ const DataTable: React.FC<DataTableProps<any>> = (props: DataTableProps<any>) =>
                           onMouseEnter={() => props.onCellMouseEnter && props.onCellMouseEnter(column.value(row), i, j)}
                           onMouseLeave={() => props.onCellMouseLeave && props.onCellMouseLeave()}
                         >
-                          {column.functionalRender ? (<column.functionalRender {...row} />) : column.render ? (
+                          {column.FunctionalRender ? (<column.FunctionalRender {...row} />) : column.render ? (
                             column.render(row)
                           ) : (
                             column.value(row)

src/components/DataTable/types.ts

@@ -7,8 +7,9 @@ export type DataTableColumn<T> = {
   search?: (row: T) => boolean
   unsearchable?: boolean
   render?: (row: T) => string | JSX.Element
-  functionalRender?: React.FC<any>
+  FunctionalRender?: React.FC<any>
   sort?: (a: T, b: T) => number
+  unsortable?: boolean
 }
 
 type RGB = `rgb(${number}, ${number}, ${number})` | `rgb(${number},${number},${number})`;

stories/DataTable.stories.tsx

@@ -29,7 +29,7 @@ type Row = {
 const FCCOLUMNS: DataTableColumn<Row>[] = [{
   header: "Functional Column",
   value: row => row.index,
-  functionalRender: () => {
+  FunctionalRender: () => {
     const [ index, setIndex ] = useState(0);
     return (
       <>
@@ -734,6 +734,7 @@ const denseCols = [{
   {
   header: "Description",
   value: row => row.description,
+  unsortable: true,
   HeaderRender: () => {
     const [distanceChecked, setDistanceChecked] = useState(true)
     const [CTCF_ChIAPETChecked, setCTCF_ChIAPETChecked] = useState(false)