right side fixed

rwieruch · rwieruch · commit 72c2b3c17e0e · 2022-03-15T22:47:28.000+01:00
diff --git a/.storybook/stories/Features/fixed-column.story.js b/.storybook/stories/Features/fixed-column.story.js
@@ -46,13 +46,13 @@ storiesOf('Features/Fixed Column', module)
         }
 
         &:nth-of-type(3) {
-          min-width: 20%;
-          width: 20%;
+          min-width: 50%;
+          width: 50%;
         }
 
         &:nth-of-type(4), &:nth-of-type(5) {
-          min-width: 700px;
-          width: 700px;
+          min-width: 25%;
+          width: 25%;
         }
       `,
     });
@@ -93,6 +93,82 @@ storiesOf('Features/Fixed Column', module)
       </Table>
     );
   })
+  .add('fixed right-side', () => {
+    const data = { nodes };
+
+    const theme = useTheme({
+      BaseCell: `
+        &:nth-of-type(1) {
+          left: 0px;
+
+          min-width: 250px;
+          width: 250px;
+        }
+
+        &:nth-of-type(2) {
+          min-width: 50%;
+          width: 50%;
+        }
+
+        &:nth-of-type(3) {
+          min-width: 250px;
+          width: 250px;
+        }
+
+        &:nth-of-type(4) {
+          min-width: 50%;
+          width: 50%;
+
+          border-right: 1px solid transparent;
+        }
+
+        &:nth-of-type(5) {
+          right: 0;
+
+          min-width: 250px;
+          width: 250px;
+
+          border-left: 1px solid #a0a8ae;
+        }
+      `,
+    });
+
+    return (
+      <Table data={data} theme={theme} layout={{ custom: true, horizontalScroll: true }}>
+        {(tableList) => (
+          <>
+            <Header>
+              <HeaderRow>
+                <HeaderCell pin>Task</HeaderCell>
+                <HeaderCell>Deadline</HeaderCell>
+                <HeaderCell>Type</HeaderCell>
+                <HeaderCell>Complete</HeaderCell>
+                <HeaderCell pin>Tasks</HeaderCell>
+              </HeaderRow>
+            </Header>
+
+            <Body>
+              {tableList.map((item) => (
+                <Row key={item.id} item={item}>
+                  <Cell pin>{item.name}</Cell>
+                  <Cell>
+                    {item.deadline.toLocaleDateString('en-US', {
+                      year: 'numeric',
+                      month: '2-digit',
+                      day: '2-digit',
+                    })}
+                  </Cell>
+                  <Cell>{item.type}</Cell>
+                  <Cell>{item.isComplete.toString()}</Cell>
+                  <Cell pin>{item.nodes?.length}</Cell>
+                </Row>
+              ))}
+            </Body>
+          </>
+        )}
+      </Table>
+    );
+  })
   .add('+ vertical scroll', () => {
     const data = { nodes };
 
@@ -116,13 +192,13 @@ storiesOf('Features/Fixed Column', module)
         }
 
         &:nth-of-type(3) {
-          min-width: 20%;
-          width: 20%;
+          min-width: 50%;
+          width: 50%;
         }
 
         &:nth-of-type(4), &:nth-of-type(5) {
-          min-width: 700px;
-          width: 700px;
+          min-width: 25%;
+          width: 25%;
         }
       `,
     });
