fix: Добавил для таблиц внутренную прокрутку и фон

shtirlizc · Mar 13, 2021 · 917673e · 917673e
1 parent 7659555
commit 917673e
Show file tree

Hide file tree

Showing 3 changed files with 442 additions and 48 deletions.
diff --git a/src/components/Table/Table.module.css b/src/components/Table/Table.module.css
@@ -1,3 +1,13 @@
+.root {
+  background: #ffffff;
+  border: 1px solid #eeeff1;
+  border-radius: 2px;
+  overflow: hidden;
+  overflow-y: scroll;
+  max-height: calc(100vh - 150px);
+  min-height: 500px;
+}
+
 .table {
   width: 100%;
   border-collapse: collapse;
@@ -15,6 +25,9 @@
   color: #4e5c69;
   padding: 12px 20px;
   text-align: left;
+  position: sticky;
+  top: 0;
+  background-color: white;
 }
 
 .td {

diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
@@ -15,49 +15,49 @@ type TableProps = {
 };
 
 export const Table: React.FC<TableProps> = ({ columns, rows }) => {
-  console.log("###: rows", rows);
-
   return (
-    <table className={s.table}>
-      <thead className={s.thead}>
-        <tr>
-          {columns.map(({ id, headerName }) => (
-            <th key={id} className={s.th}>
-              {headerName}
-            </th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {rows.map((row) => {
-          const [key] = Object.values(row);
-
-          return (
-            <tr key={key} className={s.tr}>
-              {Object.entries(row).map((td, idx) => {
-                const [field, value] = td;
-                const [currentColumn] = columns.filter(
-                  (col) => col.field === field
-                );
-
-                if (field === "id") {
-                  return null;
-                }
-
-                return (
-                  <td
-                    key={field}
-                    className={classNames(s.td, idx === 1 && s.tdRowName)}
-                  >
-                    <span>{currentColumn.headerName}</span>
-                    {value}
-                  </td>
-                );
-              })}
-            </tr>
-          );
-        })}
-      </tbody>
-    </table>
+    <div className={s.root}>
+      <table className={s.table}>
+        <thead className={s.thead}>
+          <tr>
+            {columns.map(({ id, headerName }) => (
+              <th key={id} className={s.th}>
+                {headerName}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row) => {
+            const [key] = Object.values(row);
+
+            return (
+              <tr key={key} className={s.tr}>
+                {Object.entries(row).map((td, idx) => {
+                  const [field, value] = td;
+                  const [currentColumn] = columns.filter(
+                    (col) => col.field === field
+                  );
+
+                  if (field === "id") {
+                    return null;
+                  }
+
+                  return (
+                    <td
+                      key={field}
+                      className={classNames(s.td, idx === 1 && s.tdRowName)}
+                    >
+                      <span>{currentColumn.headerName}</span>
+                      {value}
+                    </td>
+                  );
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
   );
 };