trithuc-mvc-react 3.2.0 → 3.2.2

package/components/DataManagement/DataTableSM.jsx

@@ -360,7 +360,7 @@ const DataTableSM = ({ multipleActions = [], page, setPage = () => {}, disableEd
           </Grid>
         )}
 
-        <Grid>
+        <Grid size={12}>
           <TablePaginationCustom
             count={total}
             rowsPerPage={rowsPerPage}

package/components/DataManagement/FilterGod.jsx

@@ -54,10 +54,9 @@ export const FilterGod = ({ tableName, filters, filterButtons, elementSize = "sm
 
         <AccordionDetails>
           <Grid container spacing={1}>
-            {filters.map(({ field, size, ...rest }) => {
+            {filters.map(({ field, label, size, ...rest }) => {
               if (rest.type === "date-range") {
-                const [label1, label2] = Array.isArray(field.label) ? field.label : ["Từ ngày", "Đến ngày"];
-
+                const [label1, label2] = Array.isArray(label) ? label : ["Từ ngày", "Đến ngày"];
                 const handleClear = (key) => {
                   setDataSearch((prev) => ({
                     ...prev,

package/components/table/TablePagination.jsx

@@ -8,37 +8,77 @@ function defaultLabelDisplayedRows({ from, to, count }) {
 function TablePaginationCustom({ count, rowsPerPage, page, onPageChange, onRowsPerPageChange, ...rest }) {
   const theme = useTheme();
   const matchsDownMD = useMediaQuery(theme.breakpoints.down("md"));
-
-  return (
-    <Box sx={{ overflowX: "auto", width: "100%" }}>
-      <TablePagination
-        {...rest}
-        rowsPerPageOptions={[5, 10, 20, 25, 50, 100]}
-        component="div"
-        count={count}
-        rowsPerPage={rowsPerPage}
-        page={page}
-        onPageChange={onPageChange}
-        onRowsPerPageChange={onRowsPerPageChange}
-        showFirstButton
-        showLastButton
-        labelRowsPerPage={matchsDownMD ? "Số hàng" : "Số bản ghi trên trang:"}
-        labelDisplayedRows={defaultLabelDisplayedRows}
-        sx={{
-          "& .MuiTablePagination-toolbar": {
-            paddingLeft: matchsDownMD ? "3px" : "10px",
-            paddingRight: matchsDownMD ? "3px" : "10px",
-            fontSize: matchsDownMD ? "0.65rem" : "0.8rem" // Giảm kích thước font khi trên màn hình nhỏ
-          },
-          "& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows": {
-            fontSize: matchsDownMD ? "0.65rem" : "0.8rem"
-          },
-          "& .MuiTablePagination-select": {
-            minWidth: matchsDownMD ? "50px" : "70px"
-          }
-        }}
-      />
-    </Box>
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down("sm"));
+  return !isSmallScreen ? (
+    <TablePagination
+      {...rest}
+      rowsPerPageOptions={[5, 10, 20, 25, 50, 100]}
+      component="div"
+      count={count}
+      rowsPerPage={rowsPerPage}
+      page={page}
+      onPageChange={onPageChange}
+      onRowsPerPageChange={onRowsPerPageChange}
+      showFirstButton
+      showLastButton
+      labelRowsPerPage={matchsDownMD ? "Số hàng" : "Số bản ghi trên trang:"}
+      labelDisplayedRows={defaultLabelDisplayedRows}
+      sx={{
+        width: "100%",
+        "& .MuiTablePagination-toolbar": {
+          justifyContent: "flex-end",
+          flexWrap: "wrap", // Cho nó xuống dòng nếu thiếu chỗ
+          paddingLeft: "8px",
+          paddingRight: "8px"
+        },
+        "& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows": {
+          fontSize: "0.7rem"
+        },
+        "& .MuiTablePagination-select": {
+          minWidth: "60px"
+        }
+      }}
+    />
+  ) : (
+    <TablePagination
+      {...rest}
+      rowsPerPageOptions={[5, 10, 20, 25, 50, 100]}
+      component="div"
+      count={count}
+      rowsPerPage={rowsPerPage}
+      page={page}
+      onPageChange={onPageChange}
+      onRowsPerPageChange={onRowsPerPageChange}
+      showFirstButton
+      showLastButton
+      labelRowsPerPage={matchsDownMD ? "Số hàng" : "Số bản ghi trên trang:"}
+      labelDisplayedRows={defaultLabelDisplayedRows}
+      sx={{
+        width: "100%",
+        overflowX: "auto",
+        "& .MuiTablePagination-toolbar": {
+          display: "flex",
+          flexWrap: "wrap", // Cho xuống dòng nếu không đủ chỗ
+          justifyContent: "space-between",
+          paddingLeft: "4px",
+          paddingRight: "4px",
+          gap: "2px", // Giảm khoảng cách
+          minHeight: "auto"
+        },
+        "& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows": {
+          fontSize: "0.53rem"
+        },
+        "& .MuiTablePagination-select": {
+          fontSize: "0.53rem",
+          minWidth: "45px"
+        },
+        "& .MuiTablePagination-actions > button": {
+          fontSize: "0.53rem",
+          minWidth: "20px",
+          padding: "2px"
+        }
+      }}
+    />
   );
 }
 

package/package.json

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