aio-table 10.0.0 → 11.0.0

package/index.d.ts

@@ -25,8 +25,7 @@ export type I_table_column<T> = {
     jalali?: boolean;
     filterId?: string;
     search?: boolean;
-    id?: string;
-    _id?: string;
+    id: string;
     width?: any;
     minWidth?: any;
     excel?: string | boolean;
@@ -99,7 +98,7 @@ export type I_table<T> = {
     gap?: [number, number];
     striped?: [string, string];
     columnOption?: {
-        [key in keyof I_table_column<any>]: (p: I_cellDetail<T>) => any;
+        [key in keyof I_table_column<any>]?: (p: I_cellDetail<any>) => any;
     };
     onChangeColumns?: (v: I_table_column<any>[]) => void;
 };

package/index.js

@@ -21,7 +21,6 @@ const AIOTable = (props) => {
     const popup = usePopup();
     let [dom] = useState(createRef());
     let [searchValue, setSearchValue] = useState('');
-    const [columns, setColumns] = useState([]);
     const [searchColumns, setSearchColumns] = useState([]);
     const [excelColumns, setExcelColumns] = useState([]);
     const [filterColumns, setFilterColumns] = useState([]);
@@ -42,12 +41,15 @@ const AIOTable = (props) => {
             }
             return cellDetails.column[key];
         }
-        const { columnOption = {} } = props;
-        const fn = columnOption[key] || (() => { });
+        const { columnOption } = props;
+        const fn = (columnOption || {})[key] || (() => { });
         const res = fn(cellDetails);
         if (res !== undefined) {
             return res;
         }
+        if (key === 'value') {
+            return cellDetails.row[cellDetails.column.id];
+        }
         const defaults = { show: true, title: '', justify: false, titleAttrs: {} };
         return defaults[key];
     };
@@ -55,11 +57,10 @@ const AIOTable = (props) => {
     const getIconRef = useRef(new UT.GetSvg());
     const getIcon = getIconRef.current.getIcon;
     const DragColumns = UT.useDrag((dragIndex, dropIndex, reOrder) => {
-        const newColumns = reOrder(columns, dragIndex, dropIndex);
+        const newColumns = reOrder(props.columns || [], dragIndex, dropIndex);
         if (props.onChangeColumns) {
             props.onChangeColumns(newColumns);
         }
-        setColumns(newColumns);
     }, 'aio-table-title', 'aio-table-unit');
     const getGetValue = (sort, column) => {
         if (sort.getValue) {
@@ -86,10 +87,10 @@ const AIOTable = (props) => {
         let sorts = [];
         for (let i = 0; i < columns.length; i++) {
             const column = columns[i];
-            const { _id } = column;
             const cellDetail = tableHook.getCellDetail({ column });
+            const columnId = getColumnOption('id', cellDetail);
             const sortValue = getColumnOption('sort', cellDetail);
-            const sort = sortValue === true ? { sortId: _id } : sortValue;
+            const sort = sortValue === true ? { sortId: columnId } : sortValue;
             if (!sort) {
                 continue;
             }
@@ -108,13 +109,15 @@ const AIOTable = (props) => {
     function getColumns() {
         let { columns = [] } = props;
         let searchColumns = [], excelColumns = [], filterColumns = [];
-        let updatedColumns = columns.map((column) => {
+        let updatedColumns = columns.map((column, i) => {
             const cellDetail = tableHook.getCellDetail({ column });
             const filterId = getColumnOption('filterId', cellDetail);
             const search = getColumnOption('search', cellDetail);
             const excel = getColumnOption('excel', cellDetail);
-            const id = getColumnOption('id', cellDetail) || 'aitc' + Math.round(Math.random() * 1000000);
-            column = Object.assign(Object.assign({}, column), { _id: id });
+            const id = getColumnOption('id', cellDetail);
+            if (id === undefined) {
+                console.error(`aio-table error => missing column id in props.columns[${i}]`);
+            }
             if (search) {
                 searchColumns.push(column);
             }
@@ -126,7 +129,9 @@ const AIOTable = (props) => {
             }
             return column;
         });
-        setColumns(updatedColumns);
+        if (props.onChangeColumns) {
+            props.onChangeColumns(updatedColumns);
+        }
         setSearchColumns(searchColumns);
         setExcelColumns(excelColumns);
         setFilterColumns(filterColumns);
@@ -248,7 +253,7 @@ const AIOTable = (props) => {
     const { gap = [0, 1] } = props;
     let attrs = UT.AddToAttrs(props.attrs, { className: ['aio-table', props.className], style: Object.assign({ gap: gap[1] }, props.style), attrs: { ref: dom } });
     const context = {
-        rootProps: props, columns, excelColumns, filterColumns, tableHook, sortHook, ROWS,
+        rootProps: props, excelColumns, filterColumns, tableHook, sortHook, ROWS,
         getRowsIndexDic, add, remove, search, exportToExcel, DragColumns, getIcon, popup, getColumnOption
     };
     return (_jsxs(Provider, { value: context, children: [_jsxs("div", Object.assign({}, attrs, { children: [_jsx(TableToolbar, {}), !!props.filter &&
@@ -314,10 +319,13 @@ const TableToolbar = () => {
                 _jsx("div", { className: 'aio-table-search', children: _jsx(AIOInput, { type: 'text', onChange: (value) => search(value), after: getIcon('mdiMagnify', 0.7) }) }), sortHook.renderSortButton(), !!excelColumns.length && _jsx("div", { className: 'aio-table-toolbar-button', onClick: () => exportToExcel(), children: getIcon('mdiFileExcel', 0.8) }), !!onAdd && _jsx("div", { className: 'aio-table-toolbar-button', onClick: () => add(), children: getAddText() })] })));
 };
 const TableHeader = () => {
-    let { rootProps, columns } = useProvider();
-    let { headerAttrs, onRemove, gap = [0, 1] } = rootProps;
+    let { rootProps, getColumnOption, tableHook } = useProvider();
+    let { headerAttrs, onRemove, gap = [0, 1], columns = [] } = rootProps;
     headerAttrs = UT.AddToAttrs(headerAttrs, { className: 'aio-table-header', style: { gap: gap[0] } });
-    let Titles = columns.map((o, i) => _jsx(TableTitle, { column: o, isLast: i === columns.length - 1, colIndex: i }, o._id));
+    let Titles = columns.map((column, i) => {
+        const columnId = getColumnOption('id', tableHook.getCellDetail({ column }));
+        return _jsx(TableTitle, { column: column, isLast: i === columns.length - 1, colIndex: i }, columnId);
+    });
     let RemoveTitle = !onRemove ? null : _jsx("div", { className: 'aio-table-remove-title' });
     return _jsxs("div", Object.assign({}, headerAttrs, { children: [Titles, RemoveTitle] }));
 };
@@ -334,15 +342,17 @@ const TableRow = (props) => {
     const { rowDetail } = props;
     const { row, rowIndex } = rowDetail;
     const rowId = row._id;
-    let { remove, rootProps, columns, tableHook, getIcon, getColumnOption } = useProvider();
+    let { remove, rootProps, tableHook, getIcon, getColumnOption } = useProvider();
+    const { columns = [] } = rootProps;
     const isOdd = rowIndex % 2 === 0;
     function getCells() {
         return columns.map((column) => {
             if (!getColumnOption('show', tableHook.getCellDetail(Object.assign(Object.assign({}, rowDetail), { column })))) {
                 return null;
             }
-            const key = rowId + ' ' + column._id;
             const cellDetail = tableHook.getCellDetail(Object.assign(Object.assign({}, rowDetail), { column, change: (v) => tableHook.changeCell(tableHook.getCellDetail(Object.assign(Object.assign({}, rowDetail), { column })), v) }));
+            const columnId = getColumnOption('id', cellDetail);
+            const key = rowId + ' ' + columnId;
             const value = getColumnOption('value', cellDetail);
             const cellValue = tableHook.getCellValue(cellDetail, value);
             return (_jsx(TableCell, { cellDetail: cellDetail, cellValue: cellValue, isOdd: isOdd }, key));
@@ -355,7 +365,7 @@ const TableCell = (props) => {
     let { cellDetail, cellValue, isOdd } = props;
     const { row, column } = cellDetail;
     const { tableHook, rootProps, getColumnOption } = useProvider();
-    const { columnOption = {} } = rootProps;
+    const { columnOption } = rootProps;
     const type = getColumnOption('type', cellDetail);
     if (type === 'number') {
         cellValue = UT.SplitNumber(cellValue);
@@ -364,7 +374,7 @@ const TableCell = (props) => {
     const after = getColumnOption('after', cellDetail);
     const subtext = getColumnOption('subtext', cellDetail);
     const rowId = row._id;
-    const colId = column._id;
+    const colId = getColumnOption('id', cellDetail);
     const getTemplateValue = () => {
         const { getValue = {} } = rootProps;
         if (typeof column.template === 'function') {
@@ -373,7 +383,7 @@ const TableCell = (props) => {
         if (typeof column.template === 'string' && getValue[column.template]) {
             return getValue[column.template](cellDetail);
         }
-        if (columnOption.template) {
+        if ((columnOption || {}).template) {
             return columnOption.template(cellDetail);
         }
         const pattern = getColumnOption('pattern', cellDetail);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "aio-table",
-    "version": "10.0.0",
+    "version": "11.0.0",
     "description": "all in one table. tree mode , simple mode , tree mode, gantt mode , groupby mode, freeze mode.",
     "main": "index.js",
     "types": "index.d.ts",