Feat: datatable prop to choose row size

new-lamassu-admin/src/components/fake-table/Table.js

@@ -53,7 +53,6 @@ const Td = ({
     [classes.size]: !header,
     [classes.bold]: !header && bold
   }
-
   return <div className={classnames(className, classNames)}>{children}</div>
 }
 

new-lamassu-admin/src/components/fake-table/Table.styles.js

@@ -72,7 +72,11 @@ export default {
     backgroundColor: tableErrorColor
   },
   mainContent: ({ size }) => {
-    const minHeight = size === 'lg' ? 68 : 48
+    const sizes = {
+      sm: 34,
+      lg: 68
+    }
+    const minHeight = sizes[size] || 48
     return {
       display: 'flex',
       alignItems: 'center',

new-lamassu-admin/src/components/tables/DataTable.js

@@ -35,7 +35,8 @@ const Row = ({
   expandRow,
   expWidth,
   expandable,
-  onClick
+  onClick,
+  size
 }) => {
   const classes = useStyles()
 
@@ -45,11 +46,11 @@ const Row = ({
     [classes.row]: true,
     [classes.expanded]: expanded
   }
-
   return (
     <div className={classes.rowWrapper}>
       <div className={classnames({ [classes.before]: expanded && id !== 0 })}>
         <Tr
+          size={size}
           className={classnames(trClasses)}
           onClick={() => {
             expandable && expandRow(id)
@@ -97,6 +98,7 @@ const DataTable = ({
   onClick,
   loading,
   emptyText,
+  rowSize,
   ...props
 }) => {
   const [expanded, setExpanded] = useState(initialExpanded)
@@ -131,6 +133,7 @@ const DataTable = ({
           <div ref={registerChild} style={style}>
             <Row
               width={width}
+              size={rowSize}
               id={index}
               expWidth={expWidth}
               elements={elements}

new-lamassu-admin/src/pages/Transactions/Transactions.js

@@ -74,6 +74,7 @@ const Transactions = () => {
   }
 
   const getCustomerDisplayName = tx => {
+    console.log(tx)
     if (tx.customerName) return tx.customerName
     if (tx.customerIdCardData) return formatCustomerName(tx.customerIdCardData)
     return tx.customerPhone
@@ -172,6 +173,7 @@ const Transactions = () => {
         data={R.path(['transactions'])(txResponse)}
         Details={DetailsRow}
         expandable
+        rowSize="sm"
       />
     </>
   )