table: Fix the increasing height of the table

Refs: #170
scality · May 3, 2020 · 9c048e3 · 9c048e3
1 parent 1b4fff1
commit 9c048e3
Showing 1 changed file with 84 additions and 76 deletions.
diff --git a/stories/table.js b/stories/table.js
@@ -12,14 +12,14 @@ const actions = [
   { label: "Edit", onClick: action("Edit clicked") },
   {
     label: "Remove",
-    onClick: action("Remove clicked")
-  }
+    onClick: action("Remove clicked"),
+  },
 ];
 
-const listWithActions = list.map(item => {
+const listWithActions = list.map((item) => {
   return {
     ...item,
-    actions
+    actions,
   };
 });
 const columns = [
@@ -32,7 +32,7 @@ const columns = [
         return (
           <Button
             text={"" + data}
-            onClick={event => {
+            onClick={(event) => {
               console.log(rowData);
               event.stopPropagation();
             }}
@@ -41,78 +41,78 @@ const columns = [
         );
       }
       return <span className="badge">{data}</span>;
-    }
+    },
   },
   {
     label: "First Name",
     dataKey: "first_name",
-    disableSort: false
+    disableSort: false,
   },
   {
     label: "Last Name",
     dataKey: "last_name",
-    disableSort: false
+    disableSort: false,
   },
   {
     label: "Email",
     dataKey: "email",
-    disableSort: true
+    disableSort: true,
   },
   {
     label: "Ip Address",
     dataKey: "ip_address",
-    disableSort: true
+    disableSort: true,
   },
   {
     label: "Age",
     dataKey: "age",
     disableSort: false,
-    flexGrow: 1
-  }
+    flexGrow: 1,
+  },
 ];
 
 const columnsChangeSize = [
   {
     label: "Id",
     dataKey: "id",
     disableSort: false,
-    renderer: data => <span className="badge">{data}</span>,
-    width: 50
+    renderer: (data) => <span className="badge">{data}</span>,
+    width: 50,
   },
   {
     label: "First Name",
     dataKey: "first_name",
     disableSort: false,
-    width: 150
+    width: 150,
   },
   {
     label: "Last Name",
     dataKey: "last_name",
     disableSort: false,
-    width: 150
+    width: 150,
   },
   {
     label: "Email",
     dataKey: "email",
     disableSort: true,
-    flexGrow: 1
+    flexGrow: 1,
   },
   {
     label: "Ip Address",
     dataKey: "ip_address",
     disableSort: true,
-    width: 150
+    width: 150,
   },
   {
     label: "Age",
     dataKey: "age",
     disableSort: false,
-    width: 50
-  }
+    width: 50,
+  },
 ];
 
 const ContainerWithClassName = styled.div`
-  height: 100vh;
+  height: 80%;
   .sc-table-column-cell-container-first_name {
     justify-content: center;
   }
@@ -125,58 +125,64 @@ const _noRowsRenderer = () => {
 storiesOf("Table", module)
   .add("Default", () => {
     return (
-      <Wrapper style={{ height: "100vh" }}>
-        <Table
-          list={list}
-          columns={columns}
-          disableHeader={false}
-          headerHeight={40}
-          rowHeight={40}
-          sortBy={"first_name"}
-          sortDirection={"ASC"}
-          onSort={action("Sort Clicked")}
-          onRowClick={action("Row Clicked")}
-        />
-      </Wrapper>
+      <div style={{ height: "800px" }}>
+        <div style={{ height: "80%" }}>
+          <Table
+            list={list}
+            columns={columns}
+            disableHeader={false}
+            headerHeight={40}
+            rowHeight={40}
+            sortBy={"first_name"}
+            sortDirection={"ASC"}
+            onSort={action("Sort Clicked")}
+            onRowClick={action("Row Clicked")}
+          />
+        </div>
+      </div>
     );
   })
   .add("With rowActions", () => {
     return (
-      <Wrapper style={{ height: "100vh" }}>
-        <Table
-          list={listWithActions}
-          columns={columns}
-          disableHeader={false}
-          headerHeight={40}
-          rowHeight={40}
-          sortBy={"first_name"}
-          sortDirection={"ASC"}
-          onSort={action("Sort Clicked")}
-          onRowClick={action("Row Clicked")}
-        />
-      </Wrapper>
+      <div style={{ height: "800px" }}>
+        <div style={{ height: "80%" }}>
+          <Table
+            list={listWithActions}
+            columns={columns}
+            disableHeader={false}
+            headerHeight={40}
+            rowHeight={40}
+            sortBy={"first_name"}
+            sortDirection={"ASC"}
+            onSort={action("Sort Clicked")}
+            onRowClick={action("Row Clicked")}
+          />
+        </div>
+      </div>
     );
   })
   .add("Change column size", () => {
     return (
-      <Wrapper style={{ height: "100vh" }}>
-        <Table
-          list={listWithActions}
-          columns={columnsChangeSize}
-          disableHeader={false}
-          headerHeight={40}
-          rowHeight={40}
-          sortBy={"first_name"}
-          sortDirection={"ASC"}
-          onSort={action("Sort Clicked")}
-          onRowClick={action("Row Clicked")}
-        />
-      </Wrapper>
+      <div style={{ height: "800px" }}>
+        <div style={{ height: "80%" }}>
+          <Table
+            list={listWithActions}
+            columns={columnsChangeSize}
+            disableHeader={false}
+            headerHeight={40}
+            rowHeight={40}
+            sortBy={"first_name"}
+            sortDirection={"ASC"}
+            onSort={action("Sort Clicked")}
+            onRowClick={action("Row Clicked")}
+          />
+        </div>
+      </div>
     );
   })
   .add("Center a column with CSS", () => {
     return (
-      <ContainerWithClassName>
+      <div style={{ height: "800px" }}>
         <ContainerWithClassName>
           <Table
             list={listWithActions}
@@ -190,24 +196,26 @@ storiesOf("Table", module)
             onRowClick={action("Row Clicked")}
           />
         </ContainerWithClassName>
-      </ContainerWithClassName>
+      </div>
     );
   })
   .add("Empty Table", () => {
     return (
-      <Wrapper style={{ height: "100vh" }}>
-        <Table
-          list={[]}
-          columns={columns}
-          disableHeader={false}
-          headerHeight={40}
-          rowHeight={40}
-          sortBy={"last_name"}
-          sortDirection={"DESC"}
-          onSort={action("Sort Clicked")}
-          onRowClick={action("Row Clicked")}
-          noRowsRenderer={_noRowsRenderer}
-        />
-      </Wrapper>
+      <div style={{ height: "400px" }}>
+        <div style={{ height: "80%" }}>
+          <Table
+            list={[]}
+            columns={columns}
+            disableHeader={false}
+            headerHeight={40}
+            rowHeight={40}
+            sortBy={"last_name"}
+            sortDirection={"DESC"}
+            onSort={action("Sort Clicked")}
+            onRowClick={action("Row Clicked")}
+            noRowsRenderer={_noRowsRenderer}
+          />
+        </div>
+      </div>
     );
   });