ui/table: Add flex for table row to fully use the space

Refs: #2931
scality · Nov 19, 2020 · 25d1f4b · 25d1f4b
1 parent 976560f
commit 25d1f4b
Showing 1 changed file with 17 additions and 13 deletions.
diff --git a/ui/src/components/VolumeListTable.js b/ui/src/components/VolumeListTable.js
@@ -50,14 +50,16 @@ const VolumeListContainer = styled.div`
     padding-bottom: ${padding.smaller};
 
     thead {
-      display: block;
       width: 100%;
+      display: block;
     }
     .sc-select-container {
       width: 120px;
       height: 10px;
     }
     tr {
+      // Fully use the empty space.
+      justify-content: space-between;
       :last-child {
         td {
           border-bottom: 0;
@@ -86,13 +88,11 @@ const VolumeListContainer = styled.div`
 `;
 
 const HeadRow = styled.tr`
-  width: 100%;
-  /* To display scroll bar on the table */
-  display: table;
-  table-layout: fixed;
+  display: block;
 `;
 
 const TableRow = styled(HeadRow)`
+  padding-left: '6px';
   &:hover,
   &:focus {
     background-color: ${(props) => props.theme.brand.backgroundBluer};
@@ -122,7 +122,7 @@ const CreateVolumeButton = styled(Button)`
 
 const ActionContainer = styled.span`
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   padding: ${padding.base};
   flex-direction: row-reverse;
 `;
@@ -318,16 +318,13 @@ function Table({
         <TableRow
           {...row.getRowProps({
             onClick: () => rowClicked(row),
-            style: style,
+            style: { ...style, paddingLeft: '6px' },
           })}
           volumeName={volumeName}
           row={row}
           // Note:
           // We need to pass the style property to the row component.
           // Otherwise when we scroll down, the next rows are flashing because they are re-rendered in loop.
-          // position: absolute
-          // In React-table V7 useBlockLayout doesn't make the table stretch 100% of the width of the parent.
-          // It uses inline-block divs with precise widths.
         >
           {row.cells.map((cell) => {
             let cellProps = cell.getCellProps({
@@ -407,7 +404,13 @@ function Table({
 
           {headerGroups.map((headerGroup) => {
             return (
-              <HeadRow {...headerGroup.getHeaderGroupProps()}>
+              <HeadRow
+                {...headerGroup.getHeaderGroupProps()}
+                style={{
+                  display: 'flex',
+                  paddingLeft: '6px',
+                }}
+              >
                 {headerGroup.headers.map((column) => {
                   const headerStyleProps = column.getHeaderProps(
                     Object.assign(column.getSortByToggleProps(), {
@@ -496,7 +499,7 @@ const VolumeListTable = (props) => {
         accessor: 'health',
         cellStyle: {
           textAlign: 'center',
-          width: '75px',
+          width: '80px',
         },
         Cell: (cellProps) => {
           return (
@@ -508,6 +511,7 @@ const VolumeListTable = (props) => {
       {
         Header: 'Name',
         accessor: 'name',
+        cellStyle: { flex: 1 },
       },
       {
         Header: 'Usage',
@@ -602,7 +606,7 @@ const VolumeListTable = (props) => {
     Header: 'Node',
     accessor: 'node',
     cellStyle: {
-      width: '100px',
+      flex: 1,
     },
   };
   if (isNodeColumn) {