@ceed/ads 0.0.59 → 0.0.60

package/dist/components/DataTable/DataTable.d.ts

@@ -21,7 +21,13 @@ type DataTableProps<T extends Record<string, unknown>> = {
      * 체크박스가 있는 경우, 체크박스를 클릭했을 때 선택된 row의 index를 지정한다.
      */
     selectionModel?: string[];
-    onSelectionModelChange?: (newSelectionModel: string[]) => void;
+    onSelectionModelChange?: (newSelectionModel: string[], 
+    /**
+     * Total Select를 클릭한 경우에만 값이 true/false로 들어온다.
+     * MUI에는 없는 인터페이스지만 Total Select 기능이 추가되었기 때문에 추가해야했다.
+     */
+    isTotalSelected?: boolean) => void;
+    paginationMode?: "client" | "server";
     paginationModel?: {
         page: number;
         pageSize: number;
@@ -33,6 +39,7 @@ type DataTableProps<T extends Record<string, unknown>> = {
     /**
      * Rows의 총 갯수를 직접 지정 할 수 있다.
      * 기본적으로는 rows.length를 사용하지만, 이 값을 지정하면 rows.length를 사용하지 않는다.
+     * server mode를 사용할 때 유용하다.
      */
     rowCount?: number;
     slots?: {

package/dist/components/Modal/Modal.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 declare const Modal: import("framer-motion").CustomDomComponent<Pick<import("@mui/base").ModalOwnProps, "children" | "container" | "open" | "disablePortal" | "keepMounted" | "disableAutoFocus" | "disableEnforceFocus" | "disableRestoreFocus" | "disableEscapeKeyDown" | "disableScrollLock" | "hideBackdrop"> & {
-    onClose?: ((event: {}, reason: "backdropClick" | "escapeKeyDown" | "closeClick") => void) | undefined;
+    onClose?: ((event: {}, reason: "escapeKeyDown" | "backdropClick" | "closeClick") => void) | undefined;
     sx?: import("@mui/joy/styles/types").SxProps | undefined;
 } & import("@mui/joy").ModalSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;

package/dist/index.js

@@ -1231,11 +1231,11 @@ function useDataTableRenderer({
   rows,
   columns,
   rowCount: totalRowsProp,
+  paginationMode,
   paginationModel,
   onPaginationModelChange,
   selectionModel = [],
-  onSelectionModelChange,
-  stickyHeader
+  onSelectionModelChange
 }) {
   const [page, setPage] = useState3(paginationModel?.page || 1);
   const pageSize = paginationModel?.pageSize || 20;
@@ -1244,8 +1244,8 @@ function useDataTableRenderer({
     [selectionModel]
   );
   const dataInPage = useMemo3(
-    () => rows.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize),
-    [rows, page, pageSize]
+    () => paginationMode === "server" ? rows : rows.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize),
+    [rows, page, pageSize, paginationMode]
   );
   const isAllSelected = useMemo3(
     () => dataInPage.length > 0 && dataInPage.every(
@@ -1282,26 +1282,6 @@ function useDataTableRenderer({
     pageSize,
     onPaginationModelChange: handlePageChange,
     HeadCell,
-    // HeadCell: useCallback(
-    //   (column: Column<any>) => {
-    //     const ref = useRef<HTMLTableCellElement>(null);
-    //     const style = {
-    //       width: column.width,
-    //       minWidth: column.minWidth ?? "50px",
-    //       maxWidth: column.maxWidth,
-    //       textAlign: column.type === "number" ? "end" : "start",
-    //       position: stickyHeader ? undefined : "relative",
-    //     } as React.CSSProperties;
-    //     const resizer = column.resizable ?? true ? Resizer(ref) : null;
-    //     return (
-    //       <th ref={ref} key={column.field as string} style={style}>
-    //         {column.headerName ?? (column.field as string)}
-    //         {resizer}
-    //       </th>
-    //     );
-    //   },
-    //   [stickyHeader, columns]
-    // ),
     dataInPage,
     isAllSelected,
     // all rows are selected on this page
@@ -1338,7 +1318,8 @@ function useDataTableRenderer({
     ),
     onTotalSelect: useCallback3(() => {
       onSelectionModelChange?.(
-        isTotalSelected ? [] : rows.map((_, i) => `${i}`)
+        isTotalSelected ? [] : rows.map((_, i) => `${i}`),
+        isTotalSelected
       );
     }, [isTotalSelected, rows, onSelectionModelChange])
   };