Layout tabla por finca

app/src/components/data/TemperaturePerSector/index.tsx

@@ -1,6 +1,102 @@
 import React, { FC } from "react";
+import { TableHeader as Header } from "../shared";
+import * as classes from "../tables.module.css";
 
 const TemperaturePerSector: FC = () => {
-  return null;
+  const TdGroup: FC = ({ children }) => {
+    return (
+      <td className={classes.tdGroup}>
+        <table>
+          <tr>{children}</tr>
+        </table>
+      </td>
+    );
+  };
+
+  return (
+    <table className={classes.table}>
+      <Header />
+      <tbody>
+        {/* Esto va a ser dinamico */}
+        <tr>
+          <th className={classes.cell}>Paraje Altamira</th>
+          <TdGroup>
+            <td>8,58%</td>
+            <td>7,28%</td>
+            <td>1,72%</td>
+          </TdGroup>
+          <td className={classes.cell}>16%</td>
+          <td className={classes.cell}>16.0</td>
+          <td className={classes.cell}>523</td>
+        </tr>
+        <tr>
+          <th className={classes.cell}>San Pablo</th>
+          <TdGroup>
+            <td>8,58%</td>
+            <td>7,28%</td>
+            <td>1,72%</td>
+          </TdGroup>
+          <td className={classes.cell}>16%</td>
+          <td className={classes.cell}>16.0</td>
+          <td className={classes.cell}>523</td>
+        </tr>
+        <tr>
+          <th className={classes.cell}>Gualtallary</th>
+          <TdGroup>
+            <td>8,58%</td>
+            <td>7,28%</td>
+            <td>1,72%</td>
+          </TdGroup>
+          <td className={classes.cell}>16%</td>
+          <td className={classes.cell}>16.0</td>
+          <td className={classes.cell}>523</td>
+        </tr>
+        <tr>
+          <th className={classes.cell}>Vista Flores</th>
+          <TdGroup>
+            <td>8,58%</td>
+            <td>7,28%</td>
+            <td>1,72%</td>
+          </TdGroup>
+          <td className={classes.cell}>16%</td>
+          <td className={classes.cell}>16.0</td>
+          <td className={classes.cell}>523</td>
+        </tr>
+        <tr>
+          <th className={classes.cell}>La Ribera</th>
+          <TdGroup>
+            <td>8,58%</td>
+            <td>7,28%</td>
+            <td>1,72%</td>
+          </TdGroup>
+          <td className={classes.cell}>16%</td>
+          <td className={classes.cell}>16.0</td>
+          <td className={classes.cell}>523</td>
+        </tr>
+        <tr>
+          <th className={classes.cell}>Maipú</th>
+          <TdGroup>
+            <td>8,58%</td>
+            <td>7,28%</td>
+            <td>1,72%</td>
+          </TdGroup>
+          <td className={classes.cell}>16%</td>
+          <td className={classes.cell}>16.0</td>
+          <td className={classes.cell}>523</td>
+        </tr>
+        <tr>
+          <th className={classes.cell}>Santa Rosa</th>
+          <TdGroup>
+            <td>8,58%</td>
+            <td>7,28%</td>
+            <td>1,72%</td>
+          </TdGroup>
+          <td className={classes.cell}>16%</td>
+          <td className={classes.cell}>16.0</td>
+          <td className={classes.cell}>523</td>
+        </tr>
+      </tbody>
+    </table>
+  );
 };
 export default TemperaturePerSector;

app/src/components/data/shared.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from "react";
+import * as classes from "./tables.module.css";
+
+export const TableHeader: FC = () => {
+  return (
+    <thead>
+      <th className={classes.cell}>Octubre - Marzo</th>
+      <td style={{ padding: "0" }} className={classes.cell}>
+        <table style={{ width: "100%" }}>
+          <tr>
+            <td colSpan={100}>% Horas segun temperatura</td>
+          </tr>
+          <tr>
+            <td>&lt;10%</td>
+            <td>&gt;30%</td>
+            <td>&gt;33%</td>
+          </tr>
+        </table>
+      </td>
+
+      <td className={classes.cell}>Grados días acumulados</td>
+
+      <td className={classes.cell}>Amplitud térmica</td>
+
+      <td className={classes.cell}>Precipitaciones acumuladas [mm]</td>
+    </thead>
+  );
+};

app/src/components/data/tables.module.css

@@ -0,0 +1,23 @@
+.table {
+  /* Esto es para que las tablas nesteadas tengan ancho y alto 100%
+   * No tengo idea de por que funciona
+   * */
+  height: 1px;
+}
+
+.table * {
+  text-align: center;
+}
+
+.tdGroup {
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+.tdGroup table {
+  height: 100%;
+  width: 100%;
+}
+
+.cell {
+  padding: 5px 10px;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}

app/src/components/layout/index.tsx

@@ -14,7 +14,7 @@ const Layout = ({ children }: any) => {
   return (
     <>
       <Header toggle={toggle} />
-      <div className="container-fluid mx-auto px-0 flex-norwap row">
+      <div className="container-fluid mx-auto px-0 row flex-nowrap">
         <section
           className={`sidebar bg-light col-auto min-vh-100 col-md-3 col-xl-2 ${sbClass}`}
         >

app/src/components/pages/Home.tsx

@@ -74,12 +74,12 @@ const Home: FC = () => {
       </section>
 
       <section className="row">
-        <div className="col-md-6">
+        <div className="col-xl-6">
           <TemperaturePerSeason />
           <DegreeDay />
           <Precipitation />
         </div>
-        <div className="col-md-6">
+        <div className="col-xl-6">
           <TemperaturePerSector />
         </div>
       </section>