trithuc-mvc-react 1.5.1 → 1.5.2

package/components/DataManagement/DataTable.jsx

@@ -1,4 +1,4 @@
-import { Table, TableBody, TableCell, TableContainer, TableRow } from "@mui/material";
+import { Table, TableBody, TableCell, TableContainer, TableRow, useMediaQuery, useTheme } from "@mui/material";
 import TablePaginationCustom from "../table/TablePagination";
 import { useMemo, useState } from "react";
 
@@ -142,6 +142,9 @@ const DataTable = () => {
       })
       .catch(() => {});
   };
+  const theme = useTheme();
+  const downXL = useMediaQuery(theme.breakpoints.down("xl"));
+  console.log("downXL", downXL);
   return (
     <>
       <TableContainer sx={{ position: "relative" }}>
@@ -151,8 +154,13 @@ const DataTable = () => {
           rowCount={rows.length}
           onDeleteMultiple={handleDeleteMultiple}
         />
-        <Table className="border">
-          <TableHead headLabel={columns} onSelectAllClick={handleSelectAllClick} numSelected={selected?.length} rowCount={rows.length} />
+        <Table className="border" size={downXL ? "small" : "medium"}>
+          <TableHead
+            headLabel={columns}
+            onSelectAllClick={handleSelectAllClick}
+            numSelected={selected?.length}
+            rowCount={rows.length}
+          />
           {isLoading ? (
             <TableRowsLoader rowsNum={5} colsNum={columns.length + 4} />
           ) : (
@@ -169,10 +177,12 @@ const DataTable = () => {
                   onDelete={handleDelete}
                 />
               ))}
-              
+
               {rows?.length == 0 && (
                 <TableRow>
-                  <TableCell colSpan={columns.length + 4} align="center">Không có dữ liệu</TableCell>
+                  <TableCell colSpan={columns.length + 4} align="center">
+                    Không có dữ liệu
+                  </TableCell>
                 </TableRow>
               )}
             </TableBody>

package/components/DataManagement/TableHead.jsx

@@ -13,14 +13,18 @@ export function TableHead({ numSelected, rowCount, onSelectAllClick, headLabel }
             onChange={onSelectAllClick}
           />
         </TableCell>
-        <TableCell sx={{ fontWeight: 700 }}>STT</TableCell>
+        <TableCell sx={{ textAlign: "center" }}>STT</TableCell>
         {headLabel.map((headCell) => (
-          <TableCell key={headCell.field} align={headCell.alignRight ? "right" : "left"} sx={{ fontWeight: 700 }}>
+          <TableCell
+            key={headCell.field}
+            align={headCell.alignRight ? "right" : "left"}
+            sx={{  textAlign: "center" }}
+          >
             {headCell.label}
           </TableCell>
         ))}
-        {!disableStatus && canEdit && <TableCell>Kích hoạt</TableCell>}
-        <TableCell sx={{minWidth: '136px'}}>Thao tác</TableCell>
+        {!disableStatus && canEdit && <TableCell sx={{ textAlign: "center"} }>Kích hoạt</TableCell>}
+        <TableCell sx={{ minWidth: "136px", textAlign: "center" }} >Thao tác</TableCell>
       </TableRow>
     </MuiTableHead>
   );

package/components/DataManagement/TableRowRender.jsx

@@ -32,19 +32,20 @@ export const TableRowRender = ({ index, row, selected, onSelect, onChangeStatus,
       <TableCell padding="checkbox">
         <Checkbox checked={selected} onChange={(event) => onSelect(event, row[selectedField])} />
       </TableCell>
-      <TableCell>{index + 1}</TableCell>
+      <TableCell align="center">{index + 1}</TableCell>
       {columns.map(
         ({
           field,
-          alignRight = false,
+          type="text",
           valueGetter = (row) => {
             return row[field];
           },
           renderCell,
           valueFormat = (e) => e
         }) => {
+          let align = ( type=="image" || type == "number" || type =="date"|| type == "datetime") ? "right" : "left";
           return (
-            <TableCell key={`${row[selectedField]}-${field}`} align={alignRight ? "right" : "left"}>
+            <TableCell key={`${row[selectedField]}-${field}`} align={align}>
               {renderCell ? renderCell(row) : valueFormat(valueGetter(row))}
             </TableCell>
           );

package/components/DataManagement/index.jsx

@@ -40,7 +40,6 @@ DataManagement.propTypes = {
   tabPanel: PropTypes.node
 };
 
-
 function DataManagement({
   columns = [],
   title,
@@ -58,9 +57,7 @@ function DataManagement({
   tabPanel,
   slotProps = {
     header: {
-      sx: {
-       
-      }
+      sx: {}
     }
   }
 }) {
@@ -128,7 +125,7 @@ function DataManagement({
       <DataTableContext.Provider value={values}>
         <PermissionContext.Provider value={permissionValues}>
           <FormProvider {...methods}>
-            <Stack direction="row" justifyContent={"space-between"} sx={{ mb: 4, ...slotProps?.header?.sx }}>
+            <Stack direction="row" justifyContent={"space-between"} sx={{ mb: upXL ? 2 : 1, ...slotProps?.header?.sx }}>
               <Typography variant="h4">{title}</Typography>
               <Stack direction="row" spacing={1}>
                 <Tooltip title="Làm mới">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trithuc-mvc-react",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"