@mamrp/components 1.4.3 → 1.4.4

package/dist/index.d.mts

@@ -372,39 +372,224 @@ interface DraggablePaperProps extends PaperProps {
 }
 declare function DraggablePaper({ handle, cancel, ...props }: DraggablePaperProps): React$1.JSX.Element;
 
+/**
+ * Props کامپوننت DataTable
+ *
+ * این اینترفیس تمام گزینه‌های قابل تنظیم برای کامپوننت DataTable را تعریف می‌کند
+ * و مستقیماً با خروجی useTableState سازگار است
+ *
+ * @template T - نوع داده‌های جدول (مثال: Car، User، Product)
+ */
 type DataTableProps<T extends Record<string, any>> = {
+    /** آرایه داده‌های جدول */
     data: T[];
+    /** تعریف ستون‌های جدول */
     columns: MRT_ColumnDef<T>[];
+    /** آیا جدول در حال بارگذاری است */
     isLoading?: boolean;
+    /** آیا داده‌ها در حال به‌روزرسانی هستند */
     isRefetching?: boolean;
+    /** وضعیت صفحه‌بندی (مستقیماً از useTableState) */
     pagination: MRT_PaginationState;
+    /** تابع تغییر صفحه‌بندی (setPagination از useTableState) */
     onPaginationChange: (updater: MRT_PaginationState | ((old: MRT_PaginationState) => MRT_PaginationState)) => void;
+    /** تعداد کل رکوردها (از API response) */
     totalRows: number;
+    /** فعال‌سازی صفحه‌بندی دستی (پیش‌فرض: true) */
     manualPagination?: boolean;
+    /** فیلترهای ستون (columnFilters از useTableState) */
     columnFilters?: MRT_ColumnFiltersState;
+    /** تابع تغییر فیلترهای ستون */
     onColumnFiltersChange?: (filters: MRT_ColumnFiltersState | ((old: MRT_ColumnFiltersState) => MRT_ColumnFiltersState)) => void;
+    /** فعال‌سازی فیلترینگ دستی (پیش‌فرض: true) */
     manualFiltering?: boolean;
+    /** تابع پاک کردن فیلترها (clearFilters از useTableState) */
     onClearFilters?: () => void;
+    /** نمایش دکمه پاک کردن فیلترها */
     showClearFiltersButton?: boolean;
+    /** وضعیت مرتب‌سازی (sorting از useTableState) */
     sorting?: MRT_SortingState;
+    /** تابع تغییر مرتب‌سازی (setSorting از useTableState) */
     onSortingChange?: (sorting: MRT_SortingState | ((old: MRT_SortingState) => MRT_SortingState)) => void;
+    /** فعال‌سازی مرتب‌سازی دستی (پیش‌فرض: false) */
     manualSorting?: boolean;
+    /** وضعیت نمایش ستون‌ها (columnVisibility از useTableState) */
+    columnVisibility?: Record<string, boolean>;
+    /** تابع تغییر نمایش ستون‌ها (setColumnVisibility از useTableState) */
+    onColumnVisibilityChange?: (visibility: Record<string, boolean> | ((old: Record<string, boolean>) => Record<string, boolean>)) => void;
+    /** ترتیب ستون‌ها */
+    columnOrder?: string[];
+    /** تابع تغییر ترتیب ستون‌ها */
+    onColumnOrderChange?: (order: string[] | ((old: string[]) => string[])) => void;
+    /** فعال‌سازی header چسبان */
     enableStickyHeader?: boolean;
+    /** حداکثر ارتفاع جدول */
     maxHeight?: string;
+    /** تراکم جدول */
     density?: "comfortable" | "compact" | "spacious";
+    /** امکان تغییر ترتیب ستون‌ها */
     enableColumnOrdering?: boolean;
+    /** فعال‌سازی جستجوی سراسری */
     enableGlobalFilter?: boolean;
+    /** فعال‌سازی انواع فیلتر ستون */
     enableColumnFilterModes?: boolean;
+    /** فعال‌سازی انتخاب سطر */
     enableRowSelection?: boolean;
+    /** رندر کردن اکشن‌های سفارشی بالای جدول */
     renderTopToolbarCustomActions?: (props: {
         table: any;
     }) => React.ReactNode;
+    /** رندر کردن اکشن‌های سفارشی پایین جدول */
     renderBottomToolbarCustomActions?: (props: {
         table: any;
     }) => React.ReactNode;
+    /** گزینه‌های اضافی جدول */
     tableOptions?: Partial<MRT_TableOptions<T>>;
+    /** لوکالیزیشن سفارشی */
     localization?: Record<string, string>;
 };
-declare const DataTable: <T extends Record<string, any>>({ data, columns, isLoading, isRefetching, pagination, onPaginationChange, totalRows, manualPagination, columnFilters, onColumnFiltersChange, manualFiltering, onClearFilters, showClearFiltersButton, sorting, onSortingChange, manualSorting, enableStickyHeader, maxHeight, density, enableColumnOrdering, enableGlobalFilter, enableColumnFilterModes, enableRowSelection, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, tableOptions, localization, }: DataTableProps<T>) => React$1.JSX.Element;
+/**
+ * کامپوننت DataTable - جدول پیشرفته با قابلیت‌های کامل
+ *
+ * این کامپوننت یک wrapper پیشرفته برای Material React Table است که:
+ * - مستقیماً با useTableState یکپارچه می‌شود
+ * - تمام ویژگی‌های مدرن جدول را پشتیبانی می‌کند
+ * - لوکالیزیشن کامل فارسی دارد
+ * - بهینه‌سازی شده برای عملکرد بالا
+ *
+ * ## راهنمای استفاده با useTableState:
+ *
+ * ### مرحله 1: تنظیم useTableState
+ * ```tsx
+ * const tableState = useTableState("my-table", {
+ *   initialPageSize: 25,
+ *   debounceTime: 500,
+ *   sortMapping: {
+ *     name: "NameOrdering",
+ *     status: "StatusOrdering"
+ *   }
+ * });
+ * ```
+ *
+ * ### مرحله 2: فراخوانی API
+ * ```tsx
+ * const { data } = useGetData({
+ *   PageNumber: tableState.pagination.pageIndex + 1,
+ *   PageSize: tableState.pagination.pageSize,
+ *   ...tableState.debouncedFiltring,
+ *   ...tableState.mappedSorting,
+ * });
+ * ```
+ *
+ * ### مرحله 3: تعریف ستون‌ها با فیلتر
+ * ```tsx
+ * const columns = useMemo<MRT_ColumnDef<DataType>[]>(() => [
+ *   {
+ *     accessorKey: "name",
+ *     header: "نام",
+ *     Filter: ({ column }) => (
+ *       <FormInputText
+ *         control={control}
+ *         name="NameFiltering"
+ *         placeholder="فیلتر نام"
+ *       />
+ *     ),
+ *   },
+ *   // سایر ستون‌ها...
+ * ], [control]);
+ * ```
+ *
+ * ### مرحله 4: رندر DataTable
+ * ```tsx
+ * return (
+ *   <DataTable
+ *     data={data?.items || []}
+ *     columns={columns}
+ *     isLoading={isLoading}
+ *     pagination={tableState.pagination}
+ *     onPaginationChange={tableState.setPagination}
+ *     totalRows={data?.totalRecords || 0}
+ *     sorting={tableState.sorting}
+ *     onSortingChange={tableState.setSorting}
+ *     columnVisibility={tableState.columnVisibility}
+ *     onColumnVisibilityChange={tableState.setColumnVisibility}
+ *     onClearFilters={handleClearFilters}
+ *     manualSorting={true}
+ *   />
+ * );
+ * ```
+ *
+ * ## ویژگی‌های کلیدی:
+ *
+ * 📄 **صفحه‌بندی هوشمند**: صفحه‌بندی سمت سرور با همگام‌سازی خودکار
+ * 🔍 **فیلترینگ پیشرفته**: فیلترهای سفارشی با debouncing
+ * 🔀 **مرتب‌سازی قدرتمند**: مرتب‌سازی با نگاشت بک‌اند
+ * 👁️ **مدیریت ستون‌ها**: نمایش/مخفی کردن ستون‌ها با localStorage
+ * 🌍 **لوکالیزیشن**: پشتیبانی کامل از زبان فارسی
+ * ⚡ **بهینه‌سازی**: رندرینگ بهینه با useMemo
+ * 🎨 **قابل تنظیم**: ظاهر و رفتار کاملاً قابل تنظیم
+ *
+ * @template T - نوع داده‌های جدول
+ *
+ * @example
+ * ```tsx
+ * // مثال کامل استفاده
+ * function UsersTable() {
+ *   const { control, watch, reset } = useForm();
+ *
+ *   const tableState = useTableState<UserFilter>("users-table", {
+ *     initialPageSize: 50,
+ *     watch,
+ *     syncFormToFilters: true,
+ *     sortMapping: {
+ *       name: "NameOrdering",
+ *       email: "EmailOrdering"
+ *     }
+ *   });
+ *
+ *   const { data, isLoading } = useGetUsers({
+ *     PageNumber: tableState.pagination.pageIndex + 1,
+ *     PageSize: tableState.pagination.pageSize,
+ *     ...tableState.debouncedFiltring,
+ *     ...tableState.mappedSorting,
+ *   });
+ *
+ *   const columns = useMemo(() => [
+ *     {
+ *       accessorKey: "name",
+ *       header: "نام کاربر",
+ *       Filter: () => (
+ *         <FormInputText
+ *           control={control}
+ *           name="NameFiltering"
+ *           placeholder="جستجو نام"
+ *         />
+ *       ),
+ *     }
+ *   ], [control]);
+ *
+ *   return (
+ *     <DataTable
+ *       data={data?.users || []}
+ *       columns={columns}
+ *       isLoading={isLoading}
+ *       pagination={tableState.pagination}
+ *       onPaginationChange={tableState.setPagination}
+ *       totalRows={data?.totalCount || 0}
+ *       sorting={tableState.sorting}
+ *       onSortingChange={tableState.setSorting}
+ *       columnVisibility={tableState.columnVisibility}
+ *       onColumnVisibilityChange={tableState.setColumnVisibility}
+ *       onClearFilters={() => {
+ *         tableState.clearFilters();
+ *         reset();
+ *       }}
+ *       manualSorting={true}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare const DataTable: <T extends Record<string, any>>({ data, columns, isLoading, isRefetching, pagination, onPaginationChange, totalRows, manualPagination, columnFilters, onColumnFiltersChange, manualFiltering, onClearFilters, showClearFiltersButton, sorting, onSortingChange, manualSorting, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, enableStickyHeader, maxHeight, density, enableColumnOrdering, enableGlobalFilter, enableColumnFilterModes, enableRowSelection, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, tableOptions, localization, }: DataTableProps<T>) => React$1.JSX.Element;
 
 export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomTimePicker, DataTable, DateFilter, DateFilterRange, DateMonthPicker, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, DraggablePaper, UploadImage as EnhancedUploadImage, FormInputNumber, FormInputText, HorizontalStepper, LicensePlate, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage$1 as UploadImage };

package/dist/index.d.ts

@@ -372,39 +372,224 @@ interface DraggablePaperProps extends PaperProps {
 }
 declare function DraggablePaper({ handle, cancel, ...props }: DraggablePaperProps): React$1.JSX.Element;
 
+/**
+ * Props کامپوننت DataTable
+ *
+ * این اینترفیس تمام گزینه‌های قابل تنظیم برای کامپوننت DataTable را تعریف می‌کند
+ * و مستقیماً با خروجی useTableState سازگار است
+ *
+ * @template T - نوع داده‌های جدول (مثال: Car، User، Product)
+ */
 type DataTableProps<T extends Record<string, any>> = {
+    /** آرایه داده‌های جدول */
     data: T[];
+    /** تعریف ستون‌های جدول */
     columns: MRT_ColumnDef<T>[];
+    /** آیا جدول در حال بارگذاری است */
     isLoading?: boolean;
+    /** آیا داده‌ها در حال به‌روزرسانی هستند */
     isRefetching?: boolean;
+    /** وضعیت صفحه‌بندی (مستقیماً از useTableState) */
     pagination: MRT_PaginationState;
+    /** تابع تغییر صفحه‌بندی (setPagination از useTableState) */
     onPaginationChange: (updater: MRT_PaginationState | ((old: MRT_PaginationState) => MRT_PaginationState)) => void;
+    /** تعداد کل رکوردها (از API response) */
     totalRows: number;
+    /** فعال‌سازی صفحه‌بندی دستی (پیش‌فرض: true) */
     manualPagination?: boolean;
+    /** فیلترهای ستون (columnFilters از useTableState) */
     columnFilters?: MRT_ColumnFiltersState;
+    /** تابع تغییر فیلترهای ستون */
     onColumnFiltersChange?: (filters: MRT_ColumnFiltersState | ((old: MRT_ColumnFiltersState) => MRT_ColumnFiltersState)) => void;
+    /** فعال‌سازی فیلترینگ دستی (پیش‌فرض: true) */
     manualFiltering?: boolean;
+    /** تابع پاک کردن فیلترها (clearFilters از useTableState) */
     onClearFilters?: () => void;
+    /** نمایش دکمه پاک کردن فیلترها */
     showClearFiltersButton?: boolean;
+    /** وضعیت مرتب‌سازی (sorting از useTableState) */
     sorting?: MRT_SortingState;
+    /** تابع تغییر مرتب‌سازی (setSorting از useTableState) */
     onSortingChange?: (sorting: MRT_SortingState | ((old: MRT_SortingState) => MRT_SortingState)) => void;
+    /** فعال‌سازی مرتب‌سازی دستی (پیش‌فرض: false) */
     manualSorting?: boolean;
+    /** وضعیت نمایش ستون‌ها (columnVisibility از useTableState) */
+    columnVisibility?: Record<string, boolean>;
+    /** تابع تغییر نمایش ستون‌ها (setColumnVisibility از useTableState) */
+    onColumnVisibilityChange?: (visibility: Record<string, boolean> | ((old: Record<string, boolean>) => Record<string, boolean>)) => void;
+    /** ترتیب ستون‌ها */
+    columnOrder?: string[];
+    /** تابع تغییر ترتیب ستون‌ها */
+    onColumnOrderChange?: (order: string[] | ((old: string[]) => string[])) => void;
+    /** فعال‌سازی header چسبان */
     enableStickyHeader?: boolean;
+    /** حداکثر ارتفاع جدول */
     maxHeight?: string;
+    /** تراکم جدول */
     density?: "comfortable" | "compact" | "spacious";
+    /** امکان تغییر ترتیب ستون‌ها */
     enableColumnOrdering?: boolean;
+    /** فعال‌سازی جستجوی سراسری */
     enableGlobalFilter?: boolean;
+    /** فعال‌سازی انواع فیلتر ستون */
     enableColumnFilterModes?: boolean;
+    /** فعال‌سازی انتخاب سطر */
     enableRowSelection?: boolean;
+    /** رندر کردن اکشن‌های سفارشی بالای جدول */
     renderTopToolbarCustomActions?: (props: {
         table: any;
     }) => React.ReactNode;
+    /** رندر کردن اکشن‌های سفارشی پایین جدول */
     renderBottomToolbarCustomActions?: (props: {
         table: any;
     }) => React.ReactNode;
+    /** گزینه‌های اضافی جدول */
     tableOptions?: Partial<MRT_TableOptions<T>>;
+    /** لوکالیزیشن سفارشی */
     localization?: Record<string, string>;
 };
-declare const DataTable: <T extends Record<string, any>>({ data, columns, isLoading, isRefetching, pagination, onPaginationChange, totalRows, manualPagination, columnFilters, onColumnFiltersChange, manualFiltering, onClearFilters, showClearFiltersButton, sorting, onSortingChange, manualSorting, enableStickyHeader, maxHeight, density, enableColumnOrdering, enableGlobalFilter, enableColumnFilterModes, enableRowSelection, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, tableOptions, localization, }: DataTableProps<T>) => React$1.JSX.Element;
+/**
+ * کامپوننت DataTable - جدول پیشرفته با قابلیت‌های کامل
+ *
+ * این کامپوننت یک wrapper پیشرفته برای Material React Table است که:
+ * - مستقیماً با useTableState یکپارچه می‌شود
+ * - تمام ویژگی‌های مدرن جدول را پشتیبانی می‌کند
+ * - لوکالیزیشن کامل فارسی دارد
+ * - بهینه‌سازی شده برای عملکرد بالا
+ *
+ * ## راهنمای استفاده با useTableState:
+ *
+ * ### مرحله 1: تنظیم useTableState
+ * ```tsx
+ * const tableState = useTableState("my-table", {
+ *   initialPageSize: 25,
+ *   debounceTime: 500,
+ *   sortMapping: {
+ *     name: "NameOrdering",
+ *     status: "StatusOrdering"
+ *   }
+ * });
+ * ```
+ *
+ * ### مرحله 2: فراخوانی API
+ * ```tsx
+ * const { data } = useGetData({
+ *   PageNumber: tableState.pagination.pageIndex + 1,
+ *   PageSize: tableState.pagination.pageSize,
+ *   ...tableState.debouncedFiltring,
+ *   ...tableState.mappedSorting,
+ * });
+ * ```
+ *
+ * ### مرحله 3: تعریف ستون‌ها با فیلتر
+ * ```tsx
+ * const columns = useMemo<MRT_ColumnDef<DataType>[]>(() => [
+ *   {
+ *     accessorKey: "name",
+ *     header: "نام",
+ *     Filter: ({ column }) => (
+ *       <FormInputText
+ *         control={control}
+ *         name="NameFiltering"
+ *         placeholder="فیلتر نام"
+ *       />
+ *     ),
+ *   },
+ *   // سایر ستون‌ها...
+ * ], [control]);
+ * ```
+ *
+ * ### مرحله 4: رندر DataTable
+ * ```tsx
+ * return (
+ *   <DataTable
+ *     data={data?.items || []}
+ *     columns={columns}
+ *     isLoading={isLoading}
+ *     pagination={tableState.pagination}
+ *     onPaginationChange={tableState.setPagination}
+ *     totalRows={data?.totalRecords || 0}
+ *     sorting={tableState.sorting}
+ *     onSortingChange={tableState.setSorting}
+ *     columnVisibility={tableState.columnVisibility}
+ *     onColumnVisibilityChange={tableState.setColumnVisibility}
+ *     onClearFilters={handleClearFilters}
+ *     manualSorting={true}
+ *   />
+ * );
+ * ```
+ *
+ * ## ویژگی‌های کلیدی:
+ *
+ * 📄 **صفحه‌بندی هوشمند**: صفحه‌بندی سمت سرور با همگام‌سازی خودکار
+ * 🔍 **فیلترینگ پیشرفته**: فیلترهای سفارشی با debouncing
+ * 🔀 **مرتب‌سازی قدرتمند**: مرتب‌سازی با نگاشت بک‌اند
+ * 👁️ **مدیریت ستون‌ها**: نمایش/مخفی کردن ستون‌ها با localStorage
+ * 🌍 **لوکالیزیشن**: پشتیبانی کامل از زبان فارسی
+ * ⚡ **بهینه‌سازی**: رندرینگ بهینه با useMemo
+ * 🎨 **قابل تنظیم**: ظاهر و رفتار کاملاً قابل تنظیم
+ *
+ * @template T - نوع داده‌های جدول
+ *
+ * @example
+ * ```tsx
+ * // مثال کامل استفاده
+ * function UsersTable() {
+ *   const { control, watch, reset } = useForm();
+ *
+ *   const tableState = useTableState<UserFilter>("users-table", {
+ *     initialPageSize: 50,
+ *     watch,
+ *     syncFormToFilters: true,
+ *     sortMapping: {
+ *       name: "NameOrdering",
+ *       email: "EmailOrdering"
+ *     }
+ *   });
+ *
+ *   const { data, isLoading } = useGetUsers({
+ *     PageNumber: tableState.pagination.pageIndex + 1,
+ *     PageSize: tableState.pagination.pageSize,
+ *     ...tableState.debouncedFiltring,
+ *     ...tableState.mappedSorting,
+ *   });
+ *
+ *   const columns = useMemo(() => [
+ *     {
+ *       accessorKey: "name",
+ *       header: "نام کاربر",
+ *       Filter: () => (
+ *         <FormInputText
+ *           control={control}
+ *           name="NameFiltering"
+ *           placeholder="جستجو نام"
+ *         />
+ *       ),
+ *     }
+ *   ], [control]);
+ *
+ *   return (
+ *     <DataTable
+ *       data={data?.users || []}
+ *       columns={columns}
+ *       isLoading={isLoading}
+ *       pagination={tableState.pagination}
+ *       onPaginationChange={tableState.setPagination}
+ *       totalRows={data?.totalCount || 0}
+ *       sorting={tableState.sorting}
+ *       onSortingChange={tableState.setSorting}
+ *       columnVisibility={tableState.columnVisibility}
+ *       onColumnVisibilityChange={tableState.setColumnVisibility}
+ *       onClearFilters={() => {
+ *         tableState.clearFilters();
+ *         reset();
+ *       }}
+ *       manualSorting={true}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare const DataTable: <T extends Record<string, any>>({ data, columns, isLoading, isRefetching, pagination, onPaginationChange, totalRows, manualPagination, columnFilters, onColumnFiltersChange, manualFiltering, onClearFilters, showClearFiltersButton, sorting, onSortingChange, manualSorting, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, enableStickyHeader, maxHeight, density, enableColumnOrdering, enableGlobalFilter, enableColumnFilterModes, enableRowSelection, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, tableOptions, localization, }: DataTableProps<T>) => React$1.JSX.Element;
 
 export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomTimePicker, DataTable, DateFilter, DateFilterRange, DateMonthPicker, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, DraggablePaper, UploadImage as EnhancedUploadImage, FormInputNumber, FormInputText, HorizontalStepper, LicensePlate, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage$1 as UploadImage };

package/dist/index.js

@@ -4815,6 +4815,10 @@ var DataTable = ({
   sorting = [],
   onSortingChange,
   manualSorting = false,
+  columnVisibility = {},
+  onColumnVisibilityChange,
+  columnOrder = [],
+  onColumnOrderChange,
   enableStickyHeader = true,
   maxHeight = "calc(100vh - 200px)",
   density = "compact",
@@ -4854,32 +4858,37 @@ var DataTable = ({
     columns: memoizedColumns,
     data: memoizedData,
     localization,
-    // Pagination
+    // === صفحه‌بندی ===
     manualPagination,
     onPaginationChange,
     pageCount: manualPagination ? Math.ceil(totalRows / pagination.pageSize) : void 0,
     rowCount: totalRows ?? 0,
-    // Filtering
+    // === فیلترینگ ===
     manualFiltering,
     onColumnFiltersChange,
     enableColumnFilterModes,
     enableGlobalFilter,
-    // Sorting
+    // === مرتب‌سازی ===
     manualSorting,
     onSortingChange,
-    // Features
+    // === ویژگی‌ها ===
     enableColumnOrdering,
     enableRowSelection,
     enableStickyHeader,
-    // State
+    // === وضعیت جدول ===
     state: {
       pagination,
-      columnFilters,
+      // columnFilters, // غیرفعال شده - فیلترها از طریق useTableState مدیریت می‌شوند
       sorting,
+      columnVisibility,
+      ...columnOrder && Array.isArray(columnOrder) && columnOrder.length > 0 && { columnOrder },
       isLoading,
       showProgressBars: isRefetching
     },
-    // Styling
+    // === Event Handlers ===
+    onColumnVisibilityChange,
+    ...onColumnOrderChange && { onColumnOrderChange },
+    // === استایل‌دهی ===
     muiTablePaperProps: { sx: { direction: "ltr" } },
     muiTableBodyCellProps: { sx: { textAlign: "center" } },
     muiTableHeadCellProps: {
@@ -4895,14 +4904,14 @@ var DataTable = ({
         maxHeight
       }
     },
-    // Initial state
+    // === حالت اولیه ===
     initialState: {
       density
     },
-    // Custom toolbars
+    // === تولبارهای سفارشی ===
     renderTopToolbarCustomActions: renderTopToolbarCustomActions || defaultRenderTopToolbarCustomActions,
     renderBottomToolbarCustomActions,
-    // Override with any additional options
+    // 🔧 اعمال تنظیمات اضافی
     ...tableOptions
   });
   return /* @__PURE__ */ React.createElement(import_material_react_table.MaterialReactTable, { table });