Merge branch 'select-all-items-row' into develop

gisce · Oct 6, 2023 · daba5d5 · daba5d5
2 parents e6bb71e + 1763e56
commit daba5d5
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 28 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.7-rc.0",
+  "version": "0.8.7-rc.1",
   "scripts": {
     "start": "while :; do tsc && vite build --watch --force; done",
     "build": "tsc && vite build",

diff --git 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
@@ -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>
   );
 };