From e2059f694c1e6436f105cadbbe8d8243fbad26c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc=20Gu=CC=88ell=20Segarra?= <marc@ondori.dev>
Date: Thu, 5 Oct 2023 10:36:17 +0200
Subject: [PATCH 1/2] Fix

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 07af642..67c3076 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
   "name": "@gisce/react-formiga-table",
   "version": "0.8.7-rc.0",
   "scripts": {
+    "start": "while :; do tsc && vite build --watch --force; done",
     "build": "tsc && vite build",
     "prepublishOnly": "npm run build",
     "storybook": "start-storybook -p 6006",
@@ -11,7 +12,6 @@
     "access": "public"
   },
   "dependencies": {
-    "start": "while :; do tsc && vite build --watch --force; done",
     "react": "^16.8.0 || 17.x",
     "react-dom": "^16.8.0 || 17.x",
     "styled-components": "^5.0.0",

From 1763e568c163ee7eba019f51d13a90c3080b7dc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc=20Gu=CC=88ell=20Segarra?= <marc@ondori.dev>
Date: Fri, 6 Oct 2023 08:03:29 +0200
Subject: [PATCH 2/2] Adjust select all rows option div

---
 src/Table.tsx                          | 24 +++++++++++-------------
 src/components/SelectAllRecordsRow.tsx | 19 +++++++------------
 2 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/src/Table.tsx b/src/Table.tsx
index 0011381..414299d 100644
--- a/src/Table.tsx
+++ b/src/Table.tsx
@@ -92,7 +92,6 @@ export const Table = (props: TableProps) => {
     return loadingComponent;
   }
 
-  const numberOfColumns = 1 + columns.length + (!!onRowStatus ? 1 : 0);
   const numberOfVisibleSelectedRows = dataSource
     .filter((entry) => getLevelForKey(entry.id) === 0)
     .filter((entry) => selectedRowKeys.includes(entry.id)).length;
@@ -103,6 +102,17 @@ export const Table = (props: TableProps) => {
       canClick={onRowDoubleClick !== undefined}
       readonly={readonly}
     >
+      {onSelectAllRecords && (
+        <SelectAllRecordsRow
+          numberOfVisibleSelectedRows={numberOfVisibleSelectedRows}
+          numberOfRealSelectedRows={selectedRowKeys.length}
+          numberOfTotalRows={dataSource.length}
+          totalRecords={totalItems}
+          translations={translations}
+          onSelectAllRecords={onSelectAllRecords}
+          loadingComponent={loadingComponent}
+        />
+      )}
       <table>
         <thead>
           <tr>
@@ -121,18 +131,6 @@ export const Table = (props: TableProps) => {
           </tr>
         </thead>
         <tbody>
-          {onSelectAllRecords && (
-            <SelectAllRecordsRow
-              numberOfColumns={numberOfColumns}
-              numberOfVisibleSelectedRows={numberOfVisibleSelectedRows}
-              numberOfRealSelectedRows={selectedRowKeys.length}
-              numberOfTotalRows={dataSource.length}
-              totalRecords={totalItems}
-              translations={translations}
-              onSelectAllRecords={onSelectAllRecords}
-              loadingComponent={loadingComponent}
-            />
-          )}
           <Rows
             dataSource={dataSource}
             columns={columns}
diff --git a/src/components/SelectAllRecordsRow.tsx b/src/components/SelectAllRecordsRow.tsx
index 3491e5b..355af13 100644
--- a/src/components/SelectAllRecordsRow.tsx
+++ b/src/components/SelectAllRecordsRow.tsx
@@ -2,16 +2,14 @@ import styled from "styled-components";
 import { LocalizedStrings } from "../types";
 import { useState } from "react";
 
-export const Container = styled.tr`
-  cursor: auto !important;
+export const Container = styled.div`
   height: 50px;
-  &:hover {
-    background-color: transparent !important;
-  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
 export const SelectAllRecordsRow = ({
-  numberOfColumns,
   numberOfVisibleSelectedRows,
   totalRecords,
   numberOfTotalRows,
@@ -20,7 +18,6 @@ export const SelectAllRecordsRow = ({
   loadingComponent,
   numberOfRealSelectedRows,
 }: {
-  numberOfColumns: number;
   numberOfVisibleSelectedRows: number;
   totalRecords: number;
   numberOfTotalRows: number;
@@ -81,11 +78,9 @@ export const SelectAllRecordsRow = ({
 
   return (
     <Container>
-      <td colSpan={numberOfColumns} style={{ textAlign: "center" }}>
-        {numberOfRealSelectedRows > numberOfTotalRows
-          ? allRowsAreSelected
-          : selectRowsComponent}
-      </td>
+      {numberOfRealSelectedRows > numberOfTotalRows
+        ? allRowsAreSelected
+        : selectRowsComponent}
     </Container>
   );
 };