diff --git a/src/app/page.js b/src/app/page.js index 7690561..ed41c91 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,13 +1,148 @@ -import DataTableMain from "@/components/DataTableMain"; +'use client' +import DataTable from "@/core/components/DataTable"; +import { useMemo } from "react"; -function page() { +function Page() { + const columns = useMemo( + () => [ + { + accessorKey: 'fullname', + header: 'نام کامل', + id: "fullname", + columns: [ + { + accessorKey: 'name.firstName', + header: 'نام', + id: "firstName", + enableColumnFilter: true, + datatype: "text", + filterFn: "contains", + enableClickToCopy: true, + columnFilterModeOptions: [ + "equals", + "notEquals", + "contains" + ], + }, + { + accessorKey: 'name.lastName', + header: 'نام خانوادگی', + id: "lastName", + enableColumnFilter: true, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: [ + "equals", + "notEquals", + "contains" + ], + }, + ], + enableColumnFilter: true, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: [ + "equals", + "notEquals", + "contains" + ], + }, + { + accessorKey: 'address', + header: 'آدرس', + id: "address", + enableColumnFilter: true, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: [ + "equals", + "notEquals", + "contains" + ], + }, + { + accessorKey: 'city', + header: 'شهر', + id: "city", + enableColumnFilter: true, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: [ + "equals", + "notEquals", + "contains", + "lessThan", + "greaterThan", + "between", + ], + + }, + { + accessorKey: 'state', + header: 'وضعیت', + id: "state", + text: 'نام', + enableColumnFilter: true, + datatype: "text", + filterFn: "contains", + columnFilterModeOptions: [ + "equals", + "notEquals", + "contains" + ], + }, + { + accessorKey: 'state', + header: 'محدوده', + id: "betweenNum", + text: 'محدوده', + enableColumnFilter: true, + datatype: "text", + filterFn: "betweenNum", + columnFilterModeOptions: [], + }, + { + accessorKey: 'state', + header: 'تاریخ', + id: "betweenDate", + text: 'تاریخ', + enableColumnFilter: true, + datatype: "text", + filterFn: "betweenDate", + columnFilterModeOptions: [], + }, + { + accessorKey: 'state', + header: 'شلکت', + id: "select2", + text: 'تاریخ', + type: 'select2', + enableColumnFilter: true, + datatype: "text", + filterFn: "equals", + columnFilterModeOptions: [], + }, + { + accessorKey: 'state', + header: 'سلکت', + id: "select", + text: 'تنتنت', + type: 'select', + enableColumnFilter: true, + datatype: "text", + filterFn: "equals", + columnFilterModeOptions: [], + }, + ], + [], + ); return ( <> - + ); } -export default page; +export default Page; diff --git a/src/core/components/DataTable/Main.js b/src/core/components/DataTable/Main.js new file mode 100644 index 0000000..4a38956 --- /dev/null +++ b/src/core/components/DataTable/Main.js @@ -0,0 +1,19 @@ +import { useMaterialReactTable } from "material-react-table"; +import DataTable_Paper from "./table/Paper"; + +const isTableInstanceProp = (props) => props.table !== undefined; + +const DataTable_Main = (props) => { + let table; + + if (isTableInstanceProp(props)) { + table = props.table; + } else { + // eslint-disable-next-line react-hooks/rules-of-hooks + table = useMaterialReactTable(props); + } + + return ; +}; + +export default DataTable_Main; diff --git a/src/core/components/DataTable/body/TableBodyCell.js b/src/core/components/DataTable/body/TableBodyCell.js index 93c9631..2e79414 100644 --- a/src/core/components/DataTable/body/TableBodyCell.js +++ b/src/core/components/DataTable/body/TableBodyCell.js @@ -202,7 +202,6 @@ const DataTable_TableBodyCell = ({ return ( props.table !== undefined; +const data = [ + { + name: { + firstName: 'John', + lastName: 'Doe', + }, + address: '261 Erdman Ford', + city: 'East Daphne', + state: 'Kentucky', + }, + { + name: { + firstName: 'Jane', + lastName: 'Doe', + }, + address: '769 Dominic Grove', + city: 'Columbus', + state: 'Ohio', + }, + { + name: { + firstName: 'Joe', + lastName: 'Doe', + }, + address: '566 Brakus Inlet', + city: 'South Linda', + state: 'West Virginia', + }, + { + name: { + firstName: 'Kevin', + lastName: 'Vandy', + }, + address: '722 Emie Stream', + city: 'Lincoln', + state: 'Nebraska', + }, + { + name: { + firstName: 'Joshua', + lastName: 'Rolluffs', + }, + address: '32188 Larkin Turnpike', + city: 'Charleston', + state: 'South Carolina', + }, +]; const DataTable = (props) => { - let table; + const { userId, pageName, tableName, columns, initialStateProps } = props + const { settingStore, hideAction, sortAction } = useTableSetting(); - if (isTableInstanceProp(props)) { - table = props.table; - } else { - // eslint-disable-next-line react-hooks/rules-of-hooks - table = useMaterialReactTable(props); + const onColumnVisibilityChange = (event) => { + const settingValue = event(); + hideAction(userId, pageName, tableName, settingValue, columns); + }; + const onSortingChange = (event) => { + const settingValue = event(settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || []); + sortAction(userId, pageName, tableName, settingValue, columns); } - return ; + const table = useMaterialReactTable({ + localization: FA_DATATABLE_LOCALIZATION, + columns, + data: data, + manualSorting: true, + renderTopToolbarCustomActions: ({ table }) => (<> + + ), + initialState: { + density: 'compact', + columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'], + sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [], + ...initialStateProps + }, + state: { + columnVisibility: settingStore?.[userId]?.[pageName]?.[tableName]?.['hides'], + sorting: settingStore?.[userId]?.[pageName]?.[tableName]?.['sorts'] || [] + }, + muiTableHeadProps: { + sx: { + borderTop: "1px solid #e1e1e1", + borderBottom: "2px solid #e1e1e1", + } + }, + muiTableHeadCellProps: { + sx: { + color: "primary.main", + borderLeft: "1px solid #e1e1e1", + "&:first-of-type": { + borderLeft: "unset" + } + }, + }, + muiTableBodyCellProps: { + sx: { + borderLeft: "1px solid #e1e1e1", + "&:first-of-type": { + borderLeft: "unset" + } + }, + }, + onColumnVisibilityChange: onColumnVisibilityChange, + onSortingChange: onSortingChange, + ...props + }) + + return ; }; export default DataTable; diff --git a/src/core/components/DataTable/localization/fa/datatable.js b/src/core/components/DataTable/localization/fa/datatable.js new file mode 100644 index 0000000..f80b7e0 --- /dev/null +++ b/src/core/components/DataTable/localization/fa/datatable.js @@ -0,0 +1,92 @@ +export const FA_DATATABLE_LOCALIZATION = { + actions: "عملیات", + and: "و", + cancel: "لغو", + changeFilterMode: "تغییر حالت فیلتر", + changeSearchMode: "تغییر حالت جستجو", + clearFilter: "پاک کردن فیلتر", + clearSearch: "پاک کردن جستجو", + clearSort: "پاک کردن مرتب سازی", + clickToCopy: "کلیک برای کپی", + collapse: "جمع شدن", + collapseAll: "جمع شدن همه", + columnActions: "عملیات ستون", + copiedToClipboard: "کپی شد", + dropToGroupBy: "رها کردن برای گروه بندی بر اساس {column}", + edit: "ویرایش", + expand: "باز شدن", + expandAll: "باز شدن همه", + filterArrIncludes: "شامل", + filterArrIncludesAll: "شامل همه", + filterArrIncludesSome: "شامل", + filterBetween: "میان", + filterBetweenInclusive: "میان با احتساب هر دو", + filterByColumn: "فیلتر بر اساس {column}", + filterContains: "شامل", + filterEmpty: "خالی", + filterEndsWith: "به پایان می‌رسد با", + filterEquals: "برابر", + filterEqualsString: "برابر", + filterFuzzy: "نزدیک", + filterGreaterThan: "بزرگتر از", + filterGreaterThanOrEqualTo: "بزرگتر یا مساوی", + filterInNumberRange: "میان", + filterIncludesString: "شامل", + filterIncludesStringSensitive: "شامل", + filterLessThan: "کوچکتر از", + filterLessThanOrEqualTo: "کوچکتر یا مساوی", + filterMode: "حالت فیلتر: {filterType}", + filterNotEmpty: "غیر خالی", + filterNotEquals: "نا برابر", + filterStartsWith: "شروع می‌شود با", + filterWeakEquals: "برابر", + filteringByColumn: "فیلتر بر اساس {column} - {filterType} {filterValue}", + goToFirstPage: "رفتن به صفحه اول", + goToLastPage: "رفتن به صفحه آخر", + goToNextPage: "رفتن به صفحه بعدی", + goToPreviousPage: "رفتن به صفحه قبلی", + grab: "گرفتن", + groupByColumn: "گروه بندی بر اساس {column}", + groupedBy: "گروه بندی شده بر اساس", + hideAll: "پنهان کردن همه", + hideColumn: "پنهان کردن ستون {column}", + max: "حداکثر", + min: "حداقل", + move: "انتقال", + noRecordsToDisplay: "هیچ رکوردی برای نمایش وجود ندارد", + noResultsFound: "نتیجه‌ای یافت نشد", + of: "از", + or: "یا", + pinToLeft: "چسباندن به سمت چپ", + pinToRight: "چسباندن به سمت راست", + resetColumnSize: "بازنشانی اندازه ستون", + resetOrder: "بازنشانی ترتیب", + rowActions: "عملیات ردیف", + rowNumber: "#", + rowNumbers: "شماره ردیف", + rowsPerPage: "ردیف در هر صفحه", + save: "ذخیره", + search: "جستجو", + selectedCountOfRowCountRowsSelected: + "{selectedCount} از {rowCount} ردیف انتخاب شده", + select: "انتخاب", + showAll: "نمایش همه", + showAllColumns: "نمایش همه ستون‌ها", + showHideColumns: "نمایش/مخفی کردن ستون‌ها", + showHideFilters: "نمایش/مخفی کردن فیلترها", + showHideSearch: "نمایش/مخفی کردن جستجو", + sortByColumnAsc: "مرتب سازی بر اساس {column} صعودی", + sortByColumnDesc: "مرتب سازی بر اساس {column} نزولی", + sortedByColumnAsc: "مرتب شده بر اساس {column} صعودی", + sortedByColumnDesc: "مرتب شده بر اساس {column} نزولی", + thenBy: "، سپس بر اساس ", + toggleDensity: "تغییر تراکم", + toggleFullScreen: "تغییر حالت تمام صفحه", + toggleSelectAll: "انتخاب/عدم انتخاب همه", + toggleSelectRow: "انتخاب/عدم انتخاب ردیف", + toggleVisibility: "تغییر پیدا/پنهان", + ungroupByColumn: "لغو گروه بندی بر اساس {column}", + unpin: "رها کردن", + unpinAll: "رها کردن همه", + unsorted: "بدون مرتب سازی", +}; \ No newline at end of file diff --git a/src/core/components/DataTable/table/Table.js b/src/core/components/DataTable/table/Table.js index 2bbe1a9..ca49d0c 100644 --- a/src/core/components/DataTable/table/Table.js +++ b/src/core/components/DataTable/table/Table.js @@ -58,7 +58,6 @@ const DataTable_Table = ({ {...tableProps} style={{ ...columnSizeVars, ...tableProps?.style }} sx={(theme) => ({ - borderCollapse: 'separate', display: layoutMode?.startsWith('grid') ? 'grid' : undefined, position: 'relative', ...(parseFromValuesOrFunc(tableProps?.sx, theme)), diff --git a/src/core/utils/utils.js b/src/core/utils/utils.js index 8fe3844..98e0252 100644 --- a/src/core/utils/utils.js +++ b/src/core/utils/utils.js @@ -25,8 +25,8 @@ export const getCommonTooltipProps = ( placement, ) => ({ disableInteractive: true, - enterDelay: 1000, - enterNextDelay: 1000, + enterDelay: 500, + enterNextDelay: 500, placement, }); diff --git a/src/lib/hooks/useTableSetting.jsx b/src/lib/hooks/useTableSetting.jsx index cc7aaa7..14d9d4e 100644 --- a/src/lib/hooks/useTableSetting.jsx +++ b/src/lib/hooks/useTableSetting.jsx @@ -1,9 +1,10 @@ -import {useContext} from "react"; -import {TableSettingContext} from "../contexts/tableSetting"; +import { useContext } from "react"; +import { TableSettingContext } from "../contexts/tableSetting"; -const useUser = () => { - const {settingStore, hideAction, sortAction, filterAction} = useContext(TableSettingContext); - return {settingStore, hideAction, sortAction, filterAction}; +const useTableSetting = () => { + const { settingStore, hideAction, sortAction, filterAction } = + useContext(TableSettingContext); + return { settingStore, hideAction, sortAction, filterAction }; }; -export default useUser; +export default useTableSetting;