@ceed/ads 0.0.18 → 0.0.19

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

@@ -1,27 +1,31 @@
 import React, { ComponentProps } from "react";
-import { Table, TableBody, TableHead } from "../Table";
+import { Table } from "../Table";
 type DataTableProps<T extends Record<string, unknown>> = {
-    data: T[];
-    showCheckbox?: boolean;
-    onCheckboxChange?: (event: any, selectedModel: string) => void;
+    rows: T[];
+    checkboxSelection?: boolean;
+    columns: {
+        type?: "number" | "string";
+        field: keyof T;
+        headerName?: string;
+        width?: string;
+        minWidth?: string;
+        maxWidth?: string;
+    }[];
     /**
      * 체크박스가 있는 경우, 체크박스를 클릭했을 때 선택된 row의 index를 지정한다.
      */
     selectionModel?: string[];
     onSelectionModelChange?: (newSelectionModel: string[]) => void;
-    /**
-     * 페이지네이션을 위한 prop
-     * 별도로 지정하지 않으면, data prop 기반의 페이지네이션을 사용한다.
-     */
-    page?: number;
-    onPageChange?: (newPage: number) => void;
-    rowsPerPage?: number;
+    paginationModel?: {
+        page: number;
+        pageSize: number;
+    };
+    onPaginationModelChange?: (newPage: number) => void;
     /**
      * Rows의 총 갯수를 직접 지정 할 수 있다.
-     * 이 값이 주어지면, data prop 기반의 페이지네이션을 사용하지 않는다.
-     * data lazy loading을 위한 prop
+     * 기본적으로는 rows.length를 사용하지만, 이 값을 지정하면 rows.length를 사용하지 않는다.
      */
-    totalRows?: number;
+    rowCount?: number;
     slots?: {
         checkbox?: React.ElementType;
         toolbar?: React.ElementType;
@@ -39,7 +43,7 @@ type DataTableProps<T extends Record<string, unknown>> = {
             [key: string]: any;
         }>;
     };
-} & ComponentProps<typeof Table> & Pick<ComponentProps<typeof TableHead>, "headCells"> & Pick<ComponentProps<typeof TableBody>, "cellOrder">;
+} & ComponentProps<typeof Table>;
 declare function DataTable<T extends Record<string, unknown>>(props: DataTableProps<T>): React.JSX.Element;
 declare namespace DataTable {
     var displayName: string;

package/dist/components/DataTable/DataTable.js

@@ -31,22 +31,25 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import React, { useCallback, useEffect, useMemo, useState, } from "react";
 import Sheet from "../Sheet";
-import { Table, TableHead } from "../Table";
+import { Table } from "../Table";
 import Checkbox from "../Checkbox";
 import Box from "../Box";
 import Stack from "../Stack";
 import Typography from "../Typography";
 import Button from "../Button";
+var numberFormatter = function (value) {
+    return "Intl" in window ? new Intl.NumberFormat().format(value) : value;
+};
 function TablePagination(props) {
     // prop destruction
-    var page = props.page, rowsPerPage = props.rowsPerPage, totalRows = props.totalRows, onPageChange = props.onPageChange;
+    var _a = props.paginationModel, page = _a.page, pageSize = _a.pageSize, rowCount = props.rowCount, onPageChange = props.onPageChange;
     // lib hooks
     // state, ref, querystring hooks
     // form hooks
     // query hooks
     // calculated values
     var firstPage = 1;
-    var lastPage = Math.ceil(totalRows / rowsPerPage);
+    var lastPage = Math.ceil(rowCount / pageSize);
     var beforePages = [page - 2, page - 1].filter(function (p) { return p > 1; });
     var afterPages = [page + 1, page + 2].filter(function (p) { return p <= lastPage - 1; });
     var isMoreAfterPages = lastPage > 1 && page < lastPage - 3;
@@ -69,39 +72,39 @@ function TablePagination(props) {
             React.createElement(Button, { size: "sm", variant: "plain", color: "neutral", onClick: function () { return onPageChange(page + 1); }, disabled: page === lastPage, "aria-label": "Next page" }, ">"))));
 }
 function useDataTableRenderer(_a) {
-    var data = _a.data, cellOrder = _a.cellOrder, headCells = _a.headCells, totalRowsProp = _a.totalRows, _b = _a.page, pageProp = _b === void 0 ? 1 : _b, onPageChange = _a.onPageChange, rowsPerPage = _a.rowsPerPage, _c = _a.selectionModel, selectionModel = _c === void 0 ? [] : _c, onSelectionModelChange = _a.onSelectionModelChange, onCheckboxChange = _a.onCheckboxChange;
-    var _d = useState(pageProp), page = _d[0], setPage = _d[1];
+    var rows = _a.rows, columns = _a.columns, totalRowsProp = _a.rowCount, paginationModel = _a.paginationModel, onPaginationModelChange = _a.onPaginationModelChange, _b = _a.selectionModel, selectionModel = _b === void 0 ? [] : _b, onSelectionModelChange = _a.onSelectionModelChange;
+    var _c = useState((paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.page) || 1), page = _c[0], setPage = _c[1];
+    var pageSize = (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.pageSize) || 20;
     var selectedModelSet = useMemo(function () { return new Set(selectionModel); }, [selectionModel]);
-    var dataInPage = useMemo(function () {
-        return data.slice((page - 1) * rowsPerPage, (page - 1) * rowsPerPage + rowsPerPage);
-    }, [data, page, rowsPerPage]);
+    var dataInPage = useMemo(function () { return rows.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize); }, [rows, page, pageSize]);
     var isAllSelected = useMemo(function () {
         return dataInPage.length > 0 &&
             dataInPage.every(function (_, i) {
-                return selectedModelSet.has("".concat(i + (page - 1) * rowsPerPage));
+                return selectedModelSet.has("".concat(i + (page - 1) * pageSize));
             });
-    }, [dataInPage, selectedModelSet, page, rowsPerPage]);
-    var totalRows = totalRowsProp || data.length;
-    var isTotalSelected = useMemo(function () { return totalRows > 0 && selectionModel.length === totalRows; }, [selectionModel, totalRows]);
+    }, [dataInPage, selectedModelSet, page, pageSize]);
+    var rowCount = totalRowsProp || rows.length;
+    var isTotalSelected = useMemo(function () { return rowCount > 0 && selectionModel.length === rowCount; }, [selectionModel, rowCount]);
     var handlePageChange = useCallback(function (newPage) {
         setPage(newPage);
-        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(newPage);
-    }, [onPageChange]);
+        onPaginationModelChange === null || onPaginationModelChange === void 0 ? void 0 : onPaginationModelChange(newPage);
+    }, [onPaginationModelChange]);
     useEffect(function () {
         handlePageChange(1);
-    }, [totalRows]);
+    }, [rowCount]);
     useEffect(function () {
-        if (page > Math.ceil(totalRows / rowsPerPage)) {
-            handlePageChange(Math.ceil(totalRows / rowsPerPage));
+        if (page > Math.ceil(rowCount / pageSize)) {
+            handlePageChange(Math.ceil(rowCount / pageSize));
         }
-    }, [totalRows, rowsPerPage]);
+    }, [rowCount, pageSize]);
     useEffect(function () {
         onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange([]);
     }, [page]);
     return {
-        totalRows: totalRows,
+        rowCount: rowCount,
         page: page,
-        onPageChange: handlePageChange,
+        pageSize: pageSize,
+        onPaginationModelChange: handlePageChange,
         dataInPage: dataInPage,
         isAllSelected: isAllSelected, // all rows are selected on this page
         isTotalSelected: isTotalSelected,
@@ -109,45 +112,36 @@ function useDataTableRenderer(_a) {
         onAllCheckboxChange: useCallback(function () {
             onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(isAllSelected
                 ? []
-                : dataInPage.map(function (_, i) { return "".concat(i + (page - 1) * rowsPerPage); }));
-            onCheckboxChange === null || onCheckboxChange === void 0 ? void 0 : onCheckboxChange(null, '');
+                : dataInPage.map(function (_, i) { return "".concat(i + (page - 1) * pageSize); }));
         }, [isAllSelected, dataInPage, onSelectionModelChange]),
         onCheckboxChange: useCallback(function (event, selectedModel) {
             if (selectedModelSet.has(selectedModel)) {
                 var newSelectionModel = selectionModel.filter(function (model) { return model !== selectedModel; });
                 onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(newSelectionModel);
-                onCheckboxChange === null || onCheckboxChange === void 0 ? void 0 : onCheckboxChange(event, selectedModel);
             }
             else {
                 var newSelectionModel = __spreadArray(__spreadArray([], selectionModel, true), [selectedModel], false);
                 onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(newSelectionModel);
-                onCheckboxChange === null || onCheckboxChange === void 0 ? void 0 : onCheckboxChange(event, selectedModel);
             }
         }, [selectionModel, onSelectionModelChange]),
-        renderCellOrder: useMemo(function () { return cellOrder || Object.keys(data[0] || {}); }, [data, cellOrder]),
-        renderHeadCells: useMemo(function () {
-            return headCells ||
+        columns: useMemo(function () {
+            return columns ||
                 // fallback
-                Object.keys(data[0] || {}).map(function (key) { return ({
-                    label: key,
+                Object.keys(rows[0] || {}).map(function (key) { return ({
+                    field: key,
                 }); });
-        }, [data, headCells]),
+        }, [rows, columns]),
         onTotalSelect: useCallback(function () {
-            onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(isTotalSelected ? [] : data.map(function (_, i) { return "".concat(i); }));
-        }, [isTotalSelected, data, onSelectionModelChange]),
+            onSelectionModelChange === null || onSelectionModelChange === void 0 ? void 0 : onSelectionModelChange(isTotalSelected ? [] : rows.map(function (_, i) { return "".concat(i); }));
+        }, [isTotalSelected, rows, onSelectionModelChange]),
     };
 }
 function DataTable(props) {
     // prop destruction
-    var data = props.data, showCheckbox = props.showCheckbox, headCells = props.headCells, cellOrder = props.cellOrder, selectionModel = props.selectionModel, onSelectionModelChange = props.onSelectionModelChange, _ = props.totalRows, // totalRows is used in useDataTableRenderer
-    _a = props.rowsPerPage, // totalRows is used in useDataTableRenderer
-    rowsPerPage = _a === void 0 ? 20 : _a, _page = props.page, // page is used in useDataTableRenderer
-    _onPageChange = props.onPageChange, // onPageChange is used in useDataTableRenderer
-    _onCheckboxChange = props.onCheckboxChange, // onCheckboxChange is used in useDataTableRenderer
-    _b = props.slots, // onCheckboxChange is used in useDataTableRenderer
-    _c = _b === void 0 ? {} : _b, _d = _c.checkbox, RenderCheckbox = _d === void 0 ? Checkbox : _d, Toolbar = _c.toolbar, Footer = _c.footer, _e = props.slotProps, _f = _e === void 0 ? {} : _e, _g = _f.checkbox, checkboxProps = _g === void 0 ? {} : _g, toolbarProps = _f.toolbar, _h = _f.background, backgroundProps = _h === void 0 ? {} : _h, innerProps = __rest(props, ["data", "showCheckbox", "headCells", "cellOrder", "selectionModel", "onSelectionModelChange", "totalRows", "rowsPerPage", "page", "onPageChange", "onCheckboxChange", "slots", "slotProps"]);
+    var rows = props.rows, checkboxSelection = props.checkboxSelection, selectionModel = props.selectionModel, onSelectionModelChange = props.onSelectionModelChange, _ = props.rowCount, // rowCount is used in useDataTableRenderer
+    paginationModel = props.paginationModel, _a = props.slots, _b = _a === void 0 ? {} : _a, _c = _b.checkbox, RenderCheckbox = _c === void 0 ? Checkbox : _c, Toolbar = _b.toolbar, Footer = _b.footer, _d = props.slotProps, _e = _d === void 0 ? {} : _d, _f = _e.checkbox, checkboxProps = _f === void 0 ? {} : _f, toolbarProps = _e.toolbar, _g = _e.background, backgroundProps = _g === void 0 ? {} : _g, innerProps = __rest(props, ["rows", "checkboxSelection", "selectionModel", "onSelectionModelChange", "rowCount", "paginationModel", "slots", "slotProps"]);
     // lib hooks
-    var _j = useDataTableRenderer(__assign(__assign({}, props), { rowsPerPage: rowsPerPage })), renderCellOrder = _j.renderCellOrder, renderHeadCells = _j.renderHeadCells, isAllSelected = _j.isAllSelected, isSelectedRow = _j.isSelectedRow, onAllCheckboxChange = _j.onAllCheckboxChange, onCheckboxChange = _j.onCheckboxChange, totalRows = _j.totalRows, page = _j.page, onPageChange = _j.onPageChange, dataInPage = _j.dataInPage, isTotalSelected = _j.isTotalSelected, onTotalSelect = _j.onTotalSelect;
+    var _h = useDataTableRenderer(props), columns = _h.columns, isAllSelected = _h.isAllSelected, isSelectedRow = _h.isSelectedRow, onAllCheckboxChange = _h.onAllCheckboxChange, onCheckboxChange = _h.onCheckboxChange, rowCount = _h.rowCount, page = _h.page, pageSize = _h.pageSize, onPaginationModelChange = _h.onPaginationModelChange, dataInPage = _h.dataInPage, isTotalSelected = _h.isTotalSelected, onTotalSelect = _h.onTotalSelect;
     // state, ref, querystring hooks
     // form hooks
     // query hooks
@@ -161,21 +155,21 @@ function DataTable(props) {
             }, justifyContent: "space-between", alignItems: "center" },
             React.createElement(Stack, { direction: "row", spacing: 1 },
                 !isAllSelected && (React.createElement(Typography, { level: "body-xs" },
-                    (selectionModel === null || selectionModel === void 0 ? void 0 : selectionModel.length) || 0,
+                    numberFormatter((selectionModel === null || selectionModel === void 0 ? void 0 : selectionModel.length) || 0),
                     " items selected")),
                 isAllSelected && !isTotalSelected && (React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
                     React.createElement(Typography, { level: "body-xs" },
-                        "All ", selectionModel === null || selectionModel === void 0 ? void 0 :
-                        selectionModel.length,
+                        "All ",
+                        numberFormatter((selectionModel === null || selectionModel === void 0 ? void 0 : selectionModel.length) || 0),
                         " items on this page are selected."),
                     React.createElement(Button, { size: "sm", variant: "plain", onClick: onTotalSelect },
                         "Select all ",
-                        data.length,
+                        numberFormatter(rows.length),
                         " items"))),
                 isTotalSelected && (React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
                     React.createElement(Typography, { level: "body-xs" },
                         "All ",
-                        data.length,
+                        numberFormatter(rows.length),
                         " items are selected."),
                     React.createElement(Button, { size: "sm", variant: "plain", color: "danger", onClick: onTotalSelect }, "Cancel")))),
             Toolbar && React.createElement(Toolbar, __assign({}, (toolbarProps || {})))),
@@ -193,14 +187,27 @@ function DataTable(props) {
                         },
                     },
                 ] }, innerProps),
-                React.createElement(TableHead, { showCheckbox: showCheckbox, headCells: renderHeadCells || [], onCheckboxChange: onAllCheckboxChange, slotProps: {
-                        checkbox: __assign({ checked: isAllSelected, indeterminate: (selectionModel || []).length > 0 && !isAllSelected }, checkboxProps),
-                    } }),
+                React.createElement("thead", null,
+                    React.createElement("tr", null,
+                        checkboxSelection && (React.createElement("th", { style: {
+                                width: "40px",
+                                textAlign: "center",
+                            } },
+                            React.createElement(RenderCheckbox, __assign({ onChange: onAllCheckboxChange, checked: isAllSelected, indeterminate: (selectionModel || []).length > 0 && !isAllSelected }, checkboxProps)))),
+                        columns.map(function (column) {
+                            var _a;
+                            return (React.createElement("th", { key: column.field, style: {
+                                    width: column.width,
+                                    minWidth: column.minWidth,
+                                    maxWidth: column.maxWidth,
+                                    textAlign: column.type === "number" ? "end" : "start",
+                                } }, (_a = column.headerName) !== null && _a !== void 0 ? _a : column.field));
+                        }))),
                 React.createElement("tbody", null, dataInPage.map(function (row, rowIndex) {
-                    var rowId = "".concat(rowIndex + (page - 1) * rowsPerPage);
-                    return (React.createElement("tr", { key: rowId, role: showCheckbox ? "checkbox" : undefined, tabIndex: showCheckbox ? -1 : undefined, onClick: showCheckbox
+                    var rowId = "".concat(rowIndex + (page - 1) * pageSize);
+                    return (React.createElement("tr", { key: rowId, role: checkboxSelection ? "checkbox" : undefined, tabIndex: checkboxSelection ? -1 : undefined, onClick: checkboxSelection
                             ? function (e) { return onCheckboxChange(e, rowId); }
-                            : undefined, "aria-checked": showCheckbox ? isSelectedRow(rowId) : undefined, style: showCheckbox && isSelectedRow(rowId)
+                            : undefined, "aria-checked": checkboxSelection ? isSelectedRow(rowId) : undefined, style: checkboxSelection && isSelectedRow(rowId)
                             ? {
                                 "--TableCell-dataBackground": "var(--TableCell-selectedBackground)",
                                 "--TableCell-headBackground": "var(--TableCell-selectedBackground)",
@@ -208,14 +215,16 @@ function DataTable(props) {
                             : {
                                 "--TableCell-headBackground": "transparent",
                             } },
-                        showCheckbox && (React.createElement("th", { scope: "row", style: {
+                        checkboxSelection && (React.createElement("th", { scope: "row", style: {
                                 textAlign: "center",
                             } },
                             React.createElement(RenderCheckbox, __assign({ onChange: function (e) { return onCheckboxChange(e, rowId); }, checked: isSelectedRow(rowId) }, checkboxProps)))),
-                        renderCellOrder.map(function (cellKey) { return (React.createElement("td", { key: cellKey }, row[cellKey])); })));
+                        columns.map(function (column) { return (React.createElement("td", { key: column.field, style: {
+                                textAlign: column.type === "number" ? "end" : "start",
+                            } }, row[column.field])); })));
                 })),
                 Footer && React.createElement(Footer, null))),
-        React.createElement(TablePagination, { page: page, rowsPerPage: rowsPerPage, totalRows: totalRows, onPageChange: onPageChange, onRowsPerPageChange: function () { } })));
+        React.createElement(TablePagination, { paginationModel: { page: page, pageSize: pageSize }, rowCount: rowCount, onPageChange: onPaginationModelChange, onRowsPerPageChange: function () { } })));
 }
 export { DataTable };
 DataTable.displayName = "DataTable";

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -29,6 +29,12 @@ var defaultTheme = extendTheme({
                 },
             },
         },
+        JoyTooltip: {
+            defaultProps: {
+                size: "sm",
+                placement: "top",
+            },
+        },
     },
 });
 function ThemeProvider(props) {

package/framer/index.js

@@ -32095,10 +32095,15 @@ Typography3.displayName = "Typography";
 var Typography_default2 = Typography3;
 
 // src/components/DataTable/DataTable.tsx
+var numberFormatter = (value) => "Intl" in window ? new Intl.NumberFormat().format(value) : value;
 function TablePagination(props) {
-  const { page, rowsPerPage, totalRows, onPageChange } = props;
+  const {
+    paginationModel: { page, pageSize },
+    rowCount,
+    onPageChange
+  } = props;
   const firstPage = 1;
-  const lastPage = Math.ceil(totalRows / rowsPerPage);
+  const lastPage = Math.ceil(rowCount / pageSize);
   const beforePages = [page - 2, page - 1].filter((p) => p > 1);
   const afterPages = [page + 1, page + 2].filter((p) => p <= lastPage - 1);
   const isMoreAfterPages = lastPage > 1 && page < lastPage - 3;
@@ -32207,62 +32212,58 @@ function TablePagination(props) {
   );
 }
 function useDataTableRenderer({
-  data,
-  cellOrder,
-  headCells,
-  totalRows: totalRowsProp,
-  page: pageProp = 1,
-  onPageChange,
-  rowsPerPage,
+  rows,
+  columns,
+  rowCount: totalRowsProp,
+  paginationModel,
+  onPaginationModelChange,
   selectionModel = [],
-  onSelectionModelChange,
-  onCheckboxChange
+  onSelectionModelChange
 }) {
-  const [page, setPage] = useState21(pageProp);
+  const [page, setPage] = useState21(paginationModel?.page || 1);
+  const pageSize = paginationModel?.pageSize || 20;
   const selectedModelSet = useMemo32(
     () => new Set(selectionModel),
     [selectionModel]
   );
   const dataInPage = useMemo32(
-    () => data.slice(
-      (page - 1) * rowsPerPage,
-      (page - 1) * rowsPerPage + rowsPerPage
-    ),
-    [data, page, rowsPerPage]
+    () => rows.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize),
+    [rows, page, pageSize]
   );
   const isAllSelected = useMemo32(
     () => dataInPage.length > 0 && dataInPage.every(
-      (_4, i) => selectedModelSet.has(`${i + (page - 1) * rowsPerPage}`)
+      (_4, i) => selectedModelSet.has(`${i + (page - 1) * pageSize}`)
     ),
-    [dataInPage, selectedModelSet, page, rowsPerPage]
+    [dataInPage, selectedModelSet, page, pageSize]
   );
-  const totalRows = totalRowsProp || data.length;
+  const rowCount = totalRowsProp || rows.length;
   const isTotalSelected = useMemo32(
-    () => totalRows > 0 && selectionModel.length === totalRows,
-    [selectionModel, totalRows]
+    () => rowCount > 0 && selectionModel.length === rowCount,
+    [selectionModel, rowCount]
   );
   const handlePageChange = useCallback23(
     (newPage) => {
       setPage(newPage);
-      onPageChange?.(newPage);
+      onPaginationModelChange?.(newPage);
     },
-    [onPageChange]
+    [onPaginationModelChange]
   );
   useEffect33(() => {
     handlePageChange(1);
-  }, [totalRows]);
+  }, [rowCount]);
   useEffect33(() => {
-    if (page > Math.ceil(totalRows / rowsPerPage)) {
-      handlePageChange(Math.ceil(totalRows / rowsPerPage));
+    if (page > Math.ceil(rowCount / pageSize)) {
+      handlePageChange(Math.ceil(rowCount / pageSize));
     }
-  }, [totalRows, rowsPerPage]);
+  }, [rowCount, pageSize]);
   useEffect33(() => {
     onSelectionModelChange?.([]);
   }, [page]);
   return {
-    totalRows,
+    rowCount,
     page,
-    onPageChange: handlePageChange,
+    pageSize,
+    onPaginationModelChange: handlePageChange,
     dataInPage,
     isAllSelected,
     // all rows are selected on this page
@@ -32273,9 +32274,8 @@ function useDataTableRenderer({
     ),
     onAllCheckboxChange: useCallback23(() => {
       onSelectionModelChange?.(
-        isAllSelected ? [] : dataInPage.map((_4, i) => `${i + (page - 1) * rowsPerPage}`)
+        isAllSelected ? [] : dataInPage.map((_4, i) => `${i + (page - 1) * pageSize}`)
       );
-      onCheckboxChange?.(null, "");
     }, [isAllSelected, dataInPage, onSelectionModelChange]),
     onCheckboxChange: useCallback23(
       (event, selectedModel) => {
@@ -32284,50 +32284,36 @@ function useDataTableRenderer({
             (model) => model !== selectedModel
           );
           onSelectionModelChange?.(newSelectionModel);
-          onCheckboxChange?.(event, selectedModel);
         } else {
           const newSelectionModel = [...selectionModel, selectedModel];
           onSelectionModelChange?.(newSelectionModel);
-          onCheckboxChange?.(event, selectedModel);
         }
       },
       [selectionModel, onSelectionModelChange]
     ),
-    renderCellOrder: useMemo32(
-      () => cellOrder || Object.keys(data[0] || {}),
-      [data, cellOrder]
-    ),
-    renderHeadCells: useMemo32(
-      () => headCells || // fallback
-      Object.keys(data[0] || {}).map((key) => ({
-        label: key
+    columns: useMemo32(
+      () => columns || // fallback
+      Object.keys(rows[0] || {}).map((key) => ({
+        field: key
       })),
-      [data, headCells]
+      [rows, columns]
     ),
     onTotalSelect: useCallback23(() => {
       onSelectionModelChange?.(
-        isTotalSelected ? [] : data.map((_4, i) => `${i}`)
+        isTotalSelected ? [] : rows.map((_4, i) => `${i}`)
       );
-    }, [isTotalSelected, data, onSelectionModelChange])
+    }, [isTotalSelected, rows, onSelectionModelChange])
   };
 }
 function DataTable(props) {
   const {
-    data,
-    showCheckbox,
-    headCells,
-    cellOrder,
+    rows,
+    checkboxSelection,
     selectionModel,
     onSelectionModelChange,
-    totalRows: _4,
-    // totalRows is used in useDataTableRenderer
-    rowsPerPage = 20,
-    page: _page,
-    // page is used in useDataTableRenderer
-    onPageChange: _onPageChange,
-    // onPageChange is used in useDataTableRenderer
-    onCheckboxChange: _onCheckboxChange,
-    // onCheckboxChange is used in useDataTableRenderer
+    rowCount: _4,
+    // rowCount is used in useDataTableRenderer
+    paginationModel,
     slots: {
       checkbox: RenderCheckbox = Checkbox_default2,
       toolbar: Toolbar,
@@ -32341,19 +32327,19 @@ function DataTable(props) {
     ...innerProps
   } = props;
   const {
-    renderCellOrder,
-    renderHeadCells,
+    columns,
     isAllSelected,
     isSelectedRow,
     onAllCheckboxChange,
     onCheckboxChange,
-    totalRows,
+    rowCount,
     page,
-    onPageChange,
+    pageSize,
+    onPaginationModelChange,
     dataInPage,
     isTotalSelected,
     onTotalSelect
-  } = useDataTableRenderer({ ...props, rowsPerPage });
+  } = useDataTableRenderer(props);
   return /* @__PURE__ */ jsxs2(Box_default2, { children: [
     /* @__PURE__ */ jsxs2(
       Stack_default2,
@@ -32368,25 +32354,25 @@ function DataTable(props) {
         children: [
           /* @__PURE__ */ jsxs2(Stack_default2, { direction: "row", spacing: 1, children: [
             !isAllSelected && /* @__PURE__ */ jsxs2(Typography_default2, { level: "body-xs", children: [
-              selectionModel?.length || 0,
+              numberFormatter(selectionModel?.length || 0),
               " items selected"
             ] }),
             isAllSelected && !isTotalSelected && /* @__PURE__ */ jsxs2(Stack_default2, { direction: "row", spacing: 1, alignItems: "center", children: [
               /* @__PURE__ */ jsxs2(Typography_default2, { level: "body-xs", children: [
                 "All ",
-                selectionModel?.length,
+                numberFormatter(selectionModel?.length || 0),
                 " items on this page are selected."
               ] }),
               /* @__PURE__ */ jsxs2(Button_default2, { size: "sm", variant: "plain", onClick: onTotalSelect, children: [
                 "Select all ",
-                data.length,
+                numberFormatter(rows.length),
                 " items"
               ] })
             ] }),
             isTotalSelected && /* @__PURE__ */ jsxs2(Stack_default2, { direction: "row", spacing: 1, alignItems: "center", children: [
               /* @__PURE__ */ jsxs2(Typography_default2, { level: "body-xs", children: [
                 "All ",
-                data.length,
+                numberFormatter(rows.length),
                 " items are selected."
               ] }),
               /* @__PURE__ */ jsx2(
@@ -32427,38 +32413,56 @@ function DataTable(props) {
             ],
             ...innerProps,
             children: [
-              /* @__PURE__ */ jsx2(
-                TableHead,
-                {
-                  showCheckbox,
-                  headCells: renderHeadCells || [],
-                  onCheckboxChange: onAllCheckboxChange,
-                  slotProps: {
-                    checkbox: {
-                      checked: isAllSelected,
-                      indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
-                      ...checkboxProps
-                    }
+              /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
+                checkboxSelection && /* @__PURE__ */ jsx2(
+                  "th",
+                  {
+                    style: {
+                      width: "40px",
+                      textAlign: "center"
+                    },
+                    children: /* @__PURE__ */ jsx2(
+                      RenderCheckbox,
+                      {
+                        onChange: onAllCheckboxChange,
+                        checked: isAllSelected,
+                        indeterminate: (selectionModel || []).length > 0 && !isAllSelected,
+                        ...checkboxProps
+                      }
+                    )
                   }
-                }
-              ),
+                ),
+                columns.map((column2) => /* @__PURE__ */ jsx2(
+                  "th",
+                  {
+                    style: {
+                      width: column2.width,
+                      minWidth: column2.minWidth,
+                      maxWidth: column2.maxWidth,
+                      textAlign: column2.type === "number" ? "end" : "start"
+                    },
+                    children: column2.headerName ?? column2.field
+                  },
+                  column2.field
+                ))
+              ] }) }),
               /* @__PURE__ */ jsx2("tbody", { children: dataInPage.map((row, rowIndex) => {
-                const rowId = `${rowIndex + (page - 1) * rowsPerPage}`;
+                const rowId = `${rowIndex + (page - 1) * pageSize}`;
                 return /* @__PURE__ */ jsxs2(
                   "tr",
                   {
-                    role: showCheckbox ? "checkbox" : void 0,
-                    tabIndex: showCheckbox ? -1 : void 0,
-                    onClick: showCheckbox ? (e) => onCheckboxChange(e, rowId) : void 0,
-                    "aria-checked": showCheckbox ? isSelectedRow(rowId) : void 0,
-                    style: showCheckbox && isSelectedRow(rowId) ? {
+                    role: checkboxSelection ? "checkbox" : void 0,
+                    tabIndex: checkboxSelection ? -1 : void 0,
+                    onClick: checkboxSelection ? (e) => onCheckboxChange(e, rowId) : void 0,
+                    "aria-checked": checkboxSelection ? isSelectedRow(rowId) : void 0,
+                    style: checkboxSelection && isSelectedRow(rowId) ? {
                       "--TableCell-dataBackground": "var(--TableCell-selectedBackground)",
                       "--TableCell-headBackground": "var(--TableCell-selectedBackground)"
                     } : {
                       "--TableCell-headBackground": "transparent"
                     },
                     children: [
-                      showCheckbox && /* @__PURE__ */ jsx2(
+                      checkboxSelection && /* @__PURE__ */ jsx2(
                         "th",
                         {
                           scope: "row",
@@ -32475,7 +32479,16 @@ function DataTable(props) {
                           )
                         }
                       ),
-                      renderCellOrder.map((cellKey) => /* @__PURE__ */ jsx2("td", { children: row[cellKey] }, cellKey))
+                      columns.map((column2) => /* @__PURE__ */ jsx2(
+                        "td",
+                        {
+                          style: {
+                            textAlign: column2.type === "number" ? "end" : "start"
+                          },
+                          children: row[column2.field]
+                        },
+                        column2.field
+                      ))
                     ]
                   },
                   rowId
@@ -32490,10 +32503,9 @@ function DataTable(props) {
     /* @__PURE__ */ jsx2(
       TablePagination,
       {
-        page,
-        rowsPerPage,
-        totalRows,
-        onPageChange,
+        paginationModel: { page, pageSize },
+        rowCount,
+        onPageChange: onPaginationModelChange,
         onRowsPerPageChange: () => {
         }
       }
@@ -32762,6 +32774,12 @@ var defaultTheme4 = extendTheme({
           }
         })
       }
+    },
+    JoyTooltip: {
+      defaultProps: {
+        size: "sm",
+        placement: "top"
+      }
     }
   }
 });
@@ -33025,7 +33043,8 @@ var dataTablePropertyControls = {
     // defaultValue:
     //     "https://sharadcodes.github.io/noob-cms/data/MOCK_DATA.csv",
   },
-  showCheckbox: {
+  checkboxSelection: {
+    title: "Show Checkbox",
     type: ControlType7.Boolean,
     defaultValue: true
   },
@@ -33043,13 +33062,15 @@ var dataTablePropertyControls = {
     optionTitles: ["None", "Odd", "Even"],
     defaultValue: void 0
   },
-  headCells: {
+  columns: {
     type: ControlType7.Array,
+    description: "Column\uC758 \uC0C1\uC138 \uC124\uC815\uC774 \uD544\uC694\uD55C \uACBD\uC6B0 \uC0AC\uC6A9",
     control: {
       type: ControlType7.Object,
       controls: {
-        label: {
-          type: ControlType7.String
+        field: {
+          type: ControlType7.String,
+          description: "Column Name. CSV\uC5D0 \uC788\uB294 \uAC12\uC744 \uADF8\uB300\uB85C \uB123\uC5B4\uC57C \uD55C\uB2E4."
         },
         width: {
           type: ControlType7.String
@@ -33062,7 +33083,7 @@ var dataTablePropertyControls = {
     },
     defaultValue: []
   },
-  rowsPerPage: {
+  pageSize: {
     type: ControlType7.Number,
     defaultValue: 20
   },
@@ -33074,10 +33095,10 @@ var dataTablePropertyControls = {
     type: ControlType7.Boolean,
     defaultValue: false
   },
-  onPageChange: {
+  onPaginationModelChange: {
     type: ControlType7.EventHandler
   },
-  onCheckboxChange: {
+  onSelectionModelChange: {
     type: ControlType7.EventHandler
   },
   toolbar: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceed/ads",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "main": "dist/index.js",
   "type": "module",
   "description": "UI tool for Ecube Labs front-end developers",
@@ -53,6 +53,5 @@
     "type": "git",
     "url": "git+ssh://git@github.com/Ecube-Labs/hds.git"
   },
-  "packageManager": "yarn@4.1.0",
-  "stableVersion": "0.0.17"
+  "packageManager": "yarn@4.1.0"
 }