Merge pull request #13 from gisce/resposive-styled

Resposive with Styled Components
gisce · Aug 3, 2023 · 7538c56 · 7538c56
2 parents 3f1fe16 + 19c37b2
commit 7538c56
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 242 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-formiga-table",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "scripts": {
     "build": "tsc && vite build",
     "prepublishOnly": "npm run build",

diff --git a/src/Table.tsx b/src/Table.tsx
@@ -77,7 +77,7 @@ export const Table = (props: TableProps) => {
   }, [toggleAllRowsSelected, getAllVisibleKeys]);
 
   return (
-    <Container height={height} canClick={onRowDoubleClick !== undefined}>
+    <Container height={height} canClick={onRowDoubleClick !== undefined} readonly={readonly}>
       <table>
         <thead>
           <tr>

diff --git a/src/components/Cell.tsx b/src/components/Cell.tsx
@@ -65,6 +65,7 @@ export const Cell = ({
         level={level}
       />
       <div style={{ display: "inline-block", width: "100%" }}>
+        <div className="rft-label" style={{display: 'none'}}>{column.title}</div>
         {renderedContent}
       </div>
     </td>

diff --git a/src/components/Container.tsx b/src/components/Container.tsx
@@ -1,8 +1,14 @@
 import styled from "styled-components";
 
+type ContainerProps = {
+  height?: number,
+  canClick: boolean,
+  readonly?: boolean,
+}
+
 export const Container = styled.div`
   overflow-x: auto;
-  height: ${({ height }: { height?: number; canClick: boolean }) =>
+  height: ${({ height }: ContainerProps) =>
     `${height}px` || "auto"};
   border-bottom: 1px solid #f0f0f0;
 
@@ -12,7 +18,7 @@ export const Container = styled.div`
     width: 100%;
 
     tr {
-      cursor: ${({ canClick }: { height?: number; canClick: boolean }) =>
+      cursor: ${({ canClick }: ContainerProps) =>
         canClick ? "pointer" : "auto"};
       user-select: none;
 
@@ -70,5 +76,26 @@ export const Container = styled.div`
         border-right: 0;
       }
     }
+
+    /* Responsive */
+    @media (max-width: 991px) {
+      thead {
+        display: none;
+      }
+
+      td:nth-of-type(1) {
+        width: ${(props: ContainerProps) => props.readonly ? 'auto !important' : '50px'};
+        display: ${(props: ContainerProps) => props.readonly ? 'block' : ''};
+      }
+
+      td:nth-of-type(n + 2) {
+        display: block;
+        width: auto !important;
+      }
+
+      .rft-label {
+        display: block !important;
+      }
+    }
   }
 `;