#149 Разделил дефолтную таблицу по компонентам

planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/UsersTasksTableBody/UsersTasksTableBody.js

+import { TableBody, TableCell, TableRow} from "@mui/material";
+import { memo } from "react";
+import { getComparator, stableSort } from "./helpers";
+
+function UsersTasksTableBody({rows, page, rowsPerPage, order, orderBy}) {
+
+  return (
+    <TableBody>
+      {stableSort(rows, getComparator(order, orderBy))
+        .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+        .map((row, index) => {
+          return (
+            <TableRow
+              hover
+              tabIndex={-1}
+              key={row.name}
+            >
+              <TableCell
+                component="th"
+                scope="row"
+                padding="none"
+              >
+                {row.name}
+              </TableCell>
+              <TableCell align="right">{row.calories}</TableCell>
+              <TableCell align="right">{row.fat}</TableCell>
+              <TableCell align="right">{row.carbs}</TableCell>
+              <TableCell align="right">{row.protein}</TableCell>
+            </TableRow>
+          );
+        })}
+    </TableBody>
+  );
+}
+
+export default memo(UsersTasksTableBody)
\ No newline at end of file

planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/UsersTasksTableBody/helpers.js

+function descendingComparator(a, b, orderBy) {
+  if (b[orderBy] < a[orderBy]) {
+    return -1;
+  }
+  if (b[orderBy] > a[orderBy]) {
+    return 1;
+  }
+  return 0;
+}
+
+export function getComparator(order, orderBy) {
+  return order === 'desc'
+    ? (a, b) => descendingComparator(a, b, orderBy)
+    : (a, b) => -descendingComparator(a, b, orderBy);
+}
+
+export function stableSort(array, comparator) {
+  const stabilizedThis = array.map((el, index) => [el, index]);
+  stabilizedThis.sort((a, b) => {
+    const order = comparator(a[0], b[0]);
+    if (order !== 0) {
+      return order;
+    }
+    return a[1] - b[1];
+  });
+  return stabilizedThis.map((el) => el[0]);
+}

planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/UsersTasksTableContainer.js

-import { Table, TableBody, TableCell, TableContainer, TableRow} from "@mui/material";
+import { Table, TableContainer, } from "@mui/material";
 import { memo } from "react";
-import UsersTasksTableHead from "../UsersTasksTableHead/UsersTasksTableHead";
+import UsersTasksTableBody from "./UsersTasksTableBody/UsersTasksTableBody";
+import UsersTasksTableHead from "./UsersTasksTableHead/UsersTasksTableHead";
 
-function getComparator(order, orderBy) {
-  return order === 'desc'
-    ? (a, b) => descendingComparator(a, b, orderBy)
-    : (a, b) => -descendingComparator(a, b, orderBy);
-}
-
-function stableSort(array, comparator) {
-  const stabilizedThis = array.map((el, index) => [el, index]);
-  stabilizedThis.sort((a, b) => {
-    const order = comparator(a[0], b[0]);
-    if (order !== 0) {
-      return order;
-    }
-    return a[1] - b[1];
-  });
-  return stabilizedThis.map((el) => el[0]);
-}
-
-function descendingComparator(a, b, orderBy) {
-  if (b[orderBy] < a[orderBy]) {
-    return -1;
-  }
-  if (b[orderBy] > a[orderBy]) {
-    return 1;
-  }
-  return 0;
-}
-
-function UsersTasksTableContainer({order, orderBy, handleRequestSort, rows, page, rowsPerPage}) {
-
-  const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
+function UsersTasksTableContainer({ order, orderBy, handleRequestSort, rows, page, rowsPerPage }) {
 
   return (
     <TableContainer>
@@ -43,39 +14,15 @@ function UsersTasksTableContainer({order, orderBy, handleRequestSort, rows, page
         <UsersTasksTableHead
           order={order}
           orderBy={orderBy}
-          onRequestSort={handleRequestSort}
+          handleRequestSort={handleRequestSort}
+        />
+        <UsersTasksTableBody
+          order={order}
+          orderBy={orderBy}
+          rows={rows}
+          page={page}
+          rowsPerPage={rowsPerPage}
         />
-
-        <TableBody>
-          {stableSort(rows, getComparator(order, orderBy))
-            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-            .map((row, index) => {
-              return (
-                <TableRow
-                  hover
-                  tabIndex={-1}
-                  key={row.name}
-                >
-                  <TableCell
-                    component="th"
-                    scope="row"
-                    padding="none"
-                  >
-                    {row.name}
-                  </TableCell>
-                  <TableCell align="right">{row.calories}</TableCell>
-                  <TableCell align="right">{row.fat}</TableCell>
-                  <TableCell align="right">{row.carbs}</TableCell>
-                  <TableCell align="right">{row.protein}</TableCell>
-                </TableRow>
-              );
-            })}
-          {emptyRows > 0 && (
-            <TableRow>
-              <TableCell colSpan={6} />
-            </TableRow>
-          )}
-        </TableBody>
       </Table>
     </TableContainer>
   );

planner-front/src/components/UsersTasksCompoments/UsersTasksTableHead/UsersTasksTableHead.js → planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/UsersTasksTableHead/UsersTasksTableHead.js

@@ -6,7 +6,7 @@ const headCells = [
   {
     id: 'name',
     numeric: false,
-    disablePadding: true,
+    disablePadding: false,
     label: 'Dessert (100g serving)',
   },
   {
@@ -35,9 +35,9 @@ const headCells = [
   },
 ];
 
-function UsersTasksTableHead({ order, orderBy, onRequestSort }) {
+function UsersTasksTableHead({ order, orderBy, handleRequestSort }) {
   const createSortHandler = (property) => (event) => {
-    onRequestSort(event, property);
+    handleRequestSort(event, property);
   };
 
   return (

planner-front/src/containers/UsersTasks/UsersTasks.js

 import * as React from 'react';
-import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import UsersTasksTableToolbar from '../../components/UsersTasksCompoments/UsersTasksTableToolbar/UsersTasksTableToolbar';
 import UsersTasksTablePagination from '../../components/UsersTasksCompoments/UsersTasksTablePagination/UsersTasksTablePagination';
@@ -58,7 +57,7 @@ export default function EnhancedTable() {
       <UsersTasksTableContainer
         order={order}
         orderBy={orderBy}
-        onRequestSort={handleRequestSort}
+        handleRequestSort={handleRequestSort}
         rows={rows}
         page={page}
         rowsPerPage={rowsPerPage}