Add pointer cursor when onRowClick is set

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.2",
+  "version": "0.8.0-a.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/components/DataTable/datatable.tsx

@@ -331,6 +331,7 @@ const DataTable: React.FC<DataTableProps<any>> = (props: DataTableProps<any>) =>
                     hover
                     key={"row" + i}
                     onClick={() => props.onRowClick && props.onRowClick(row, i + page * rowsPerPage)}
+                    sx={{cursor: props.onRowClick ? "pointer" : "auto"}}
                     onMouseEnter={() => props.onRowMouseEnter && props.onRowMouseEnter(row, i + page * rowsPerPage)}
                     onMouseLeave={() => props.onRowMouseLeave && props.onRowMouseLeave()}
                   >
@@ -382,6 +383,7 @@ const DataTable: React.FC<DataTableProps<any>> = (props: DataTableProps<any>) =>
             <Typography variant="h4">Add Columns</Typography>
             {(props.defaultColumnsToShow
               ? props.columns.filter((c) => !props.defaultColumnsToShow?.includes(c.header))
+              //Why is this "or 5" here? Kinda makes no sense?
               : props.columns.slice(props.noOfDefaultColumns || 5, props.columns.length)
             ).map((col, i) => (
               <Fragment key={i}>

stories/DataTable.stories.tsx

@@ -124,7 +124,7 @@ AddMoreColumnsOnSelect.args = {
   tableTitle: "Table Title",
   searchable: true,
   showMoreColumns: true,        
-  noOfDefaultColumns: 3
+  noOfDefaultColumns: 2
 }
 
 HoverInfo.args = {