#73 Allowing to specify width of columns in Table component

5afe · Oct 25, 2018 · e460c15 · e460c15
1 parent 22a5da1
commit e460c15
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/src/components/Table/TableHead.jsx b/src/components/Table/TableHead.jsx
@@ -14,6 +14,17 @@ export type Column = {
   disablePadding: boolean,
   label: string,
   custom: boolean, // If content will be rendered by user manually
+  width?: number,
+}
+
+export const cellWidth = (width: number | typeof undefined) => {
+  if (!width) {
+    return undefined
+  }
+
+  return {
+    width: `${width}px`,
+  }
 }
 
 type Props = {

diff --git a/src/routes/safe/component/Balances/dataFetcher.js b/src/routes/safe/component/Balances/dataFetcher.js
@@ -55,6 +55,7 @@ export const generateColumns = () => {
     disablePadding: false,
     label: 'Asset',
     custom: false,
+    width: 250,
   }
 
   const balanceRow: Column = {

diff --git a/src/routes/safe/component/Balances/index.jsx b/src/routes/safe/component/Balances/index.jsx
@@ -12,7 +12,7 @@ import Col from '~/components/layout/Col'
 import Row from '~/components/layout/Row'
 import Paragraph from '~/components/layout/Paragraph'
 import Modal from '~/components/Modal'
-import { type Column } from '~/components/Table/TableHead'
+import { type Column, cellWidth } from '~/components/Table/TableHead'
 import Table from '~/components/Table'
 import { sm, xs } from '~/theme/variables'
 import { getBalanceData, generateColumns, BALANCE_TABLE_ASSET_ID, type BalanceRow, filterByZero } from './dataFetcher'
@@ -155,11 +155,11 @@ class Balances extends React.Component<Props, State> {
           {(sortedData: Array<BalanceRow>) => sortedData.map((row: any, index: number) => (
             <TableRow tabIndex={-1} key={index} className={classes.hide}>
               { autoColumns.map((column: Column) => (
-                <TableCell key={column.id} numeric={column.numeric} component="th" scope="row">
+                <TableCell key={column.id} style={cellWidth(column.width)} numeric={column.numeric} component="td">
                   {row[column.id]}
                 </TableCell>
               )) }
-              <TableCell component="th" scope="row">
+              <TableCell component="td">
                 <Row align="end" className={classes.actions}>
                   { granted &&
                     <Button variant="contained" size="small" color="secondary" className={classes.send} onClick={this.onShow('Send')}>