es-grid-template 0.0.13 → 0.1.1

package/lib/grid-component/EditableCell.js

@@ -54,7 +54,8 @@ const EditableCell = props => {
     format,
     control,
     getValues,
-    handleCellChange
+    handleCellChange,
+    getRowKey
   } = (0, _react.useContext)(_useContext.TableContext);
   const datePickerRef = _react.default.useRef(null);
   const dateTimePickerRef = _react.default.useRef(null);
@@ -72,38 +73,33 @@ const EditableCell = props => {
     const minDate = (0, _hooks.convertDateToDayjs)(column.minDate, dateFormat) ?? undefined;
     switch (editType) {
       case 'date':
-        return /*#__PURE__*/_react.default.createElement(_antd.DatePicker
-        // id={`col${indexCol}-record${indexRow}`}
-        , {
+        return /*#__PURE__*/_react.default.createElement(_antd.DatePicker, {
           ref: datePickerRef,
           format: {
             format: dateFormat,
             type: 'mask'
           }
-
           // locale={buddhistLocale}
           ,
           style: {
             width: '100%',
             height: '100%'
           },
-          value: date
-          // defaultValue={date}
-          ,
-
+          value: date,
           onBlur: () => {
             const formState = getValues();
             const itemState = getValues(dataIndex);
             // @ts-ignore
             const prevState = record[dataIndex];
             const newState = itemState;
+            const key = getRowKey?.(record, index);
             if (newState !== prevState) {
-              // @ts-ignore
               handleCellChange?.({
-                key: record[rowKey],
+                key: key,
                 record: formState,
                 prevState,
                 newState,
+                option: newState,
                 type: 'blur'
               });
             }
@@ -160,6 +156,7 @@ const EditableCell = props => {
           minDate: minDate,
           onChange: (newDate, dateString) => {
             const newDateValue = dateString ? (0, _moment.default)((0, _hooks.convertDayjsToDate)(dateString, dateFormat)).format() : null;
+            // console.log('newDateValue', newDateValue)
             onChange(newDateValue);
             setTimeout(() => {
               // @ts-ignore
@@ -172,13 +169,14 @@ const EditableCell = props => {
             // @ts-ignore
             const prevState = record[dataIndex];
             const newState = itemState;
+            const key = getRowKey?.(record, index);
             if (prevState !== newState) {
-              // @ts-ignore
               handleCellChange?.({
-                key: record[rowKey],
+                key: key,
                 record: formState,
                 prevState,
                 newState,
+                option: newState,
                 type: 'blur'
               });
             }
@@ -189,8 +187,6 @@ const EditableCell = props => {
       case 'quarter':
       case 'year':
         const pickerFormat = (0, _hooks.getDatepickerFormat)(editType, column);
-        // @ts-ignore
-        // const dateValue = !isEmpty(record[column.dataIndex]) ? dayjs(record[column.key], pickerFormat) : null
         const maxDateValue1 = !(0, _hooks.isEmpty)(column.maxDate) ? (0, _dayjs.default)(column.maxDate, pickerFormat) : undefined;
         const minDateValue1 = !(0, _hooks.isEmpty)(column.minDate) ? (0, _dayjs.default)(column.minDate, pickerFormat) : undefined;
         return /*#__PURE__*/_react.default.createElement(_antd.DatePicker, {
@@ -202,28 +198,16 @@ const EditableCell = props => {
           style: {
             width: '100%',
             height: '100%'
-          }
-          // defaultValue={dateValue}
-          ,
+          },
           picker: editType,
           placeholder: column.placeholder,
           disabled: (0, _hooks.isDisable)(column, record) ?? false,
           maxDate: maxDateValue1,
-          minDate: minDateValue1
-          // onChange={(dValue, dateString) => {
-          //   const newDateValue = dateString ? dateString : null
-          //
-          //   // record[column.dataIndex] = newDateValue
-          //   // handleCellChange(newDateValue, newDateValue,  record, col, indexRow, indexCol)
-          // }}
-          ,
+          minDate: minDateValue1,
           popupClassName: 'be-popup-container'
         });
       case 'week':
         const weekFormat = (0, _hooks.getDatepickerFormat)(editType, column);
-
-        // @ts-ignore
-        // const weekValue = !isEmpty(record[column.dataIndex]) ? dayjs(record[column.dataIndex], weekFormat) : null
         const maxWeekValue = !(0, _hooks.isEmpty)(column.maxDate) ? (0, _dayjs.default)(column.maxDate, weekFormat) : undefined;
         const minWeekValue = !(0, _hooks.isEmpty)(column.minDate) ? (0, _dayjs.default)(column.minDate, weekFormat) : undefined;
         return /*#__PURE__*/_react.default.createElement(_antd.DatePicker, {
@@ -231,21 +215,12 @@ const EditableCell = props => {
           style: {
             width: '100%',
             height: '100%'
-          }
-          // defaultValue={weekValue}
-          ,
+          },
           picker: editType,
           placeholder: column.placeholder,
           disabled: (0, _hooks.isDisable)(column, record) ?? false,
           maxDate: maxWeekValue,
-          minDate: minWeekValue
-          // onChange={(dateValue, dateString) => {
-          //   const newDateValue = dateString ? dateString : null
-          //
-          //   record[column.dataIndex] = newDateValue
-          //   handleCellChange(newDateValue, newDateValue,  record, col, indexRow, indexCol)
-          // }}
-          ,
+          minDate: minWeekValue,
           popupClassName: 'be-popup-container'
         });
       case 'time':
@@ -261,22 +236,10 @@ const EditableCell = props => {
           format: {
             format: timeFormat,
             type: 'mask'
-          }
-          // defaultValue={timeValue}
-          ,
+          },
           maxDate: maxTime,
           minDate: minTime,
-          disabled: (0, _hooks.isDisable)(column, record) ?? false
-          // onChange={(values: any, timeString) => {
-          //   const newTimeValue = timeString ? timeString : null
-          //   const newrecordData = {
-          //     ...record,
-          //     // [column.dataIndex]: newTimeValue
-          //   }
-          //
-          //   // handleCellChange(newTimeValue, newTimeValue, newrecordData, col, indexRow, indexCol)
-          // }}
-          ,
+          disabled: (0, _hooks.isDisable)(column, record) ?? false,
           style: {
             width: '100%',
             height: '100%'
@@ -339,21 +302,31 @@ const EditableCell = props => {
           // @ts-ignore
           valueSelectTable = column?.editSelectSettings?.defaultValue(record[column.dataIndex], record);
         }
+        console.log('valueSelectTable', valueSelectTable);
         return /*#__PURE__*/_react.default.createElement(_asyncTableSelect.AsyncTableSelect, {
           id: `col${indexCol}-record${indexRow}`,
           columns: columnsTable,
           options: options,
           defaultOptions: options
-          // onChange={(val: any, option) => {
-          //   // const newValue = val && (column?.editSelectSettings?.isMulti || column?.editSelectSettings?.selectMode === 'checkbox') ? (val?.map((item: any) => item[keySelect]) ?? []) : (val ? val[keySelect] : null)
-          //   const newrecordData = {
-          //     ...record,
-          //     [column.dataIndex]: val
-          //   }
-          //
-          //   // handleCellChange(option, val, newrecordData, col, indexRow, indexCol)
-          // }}
+          // value={valueSelectTable}
           ,
+          value: value,
+          onChange: (val, option) => {
+            onChange(val);
+            const formState = getValues();
+            // const itemState = getValues(dataIndex)
+            // @ts-ignore
+            const prevState = record[dataIndex];
+            const newState = val;
+            handleCellChange?.({
+              key: getRowKey?.(record, index),
+              record: formState,
+              prevState,
+              newState,
+              option: option,
+              type: 'blur'
+            });
+          },
           showSearch: true,
           mode: column?.editSelectSettings?.isMulti || column?.editSelectSettings?.selectMode === 'checkbox' ? 'multiple' : undefined,
           focusToSelectAll: true,
@@ -362,16 +335,13 @@ const EditableCell = props => {
             width: '100%',
             height: '100%'
           },
-          value: valueSelectTable,
           placeholder: t ? t('Select') : 'Select',
           allowClear: column.isClearable ?? false,
           maxTagCount: 'responsive',
           rowKey: keySelect,
           popupMatchSelectWidth: column?.editSelectSettings?.menuWidth ? column?.editSelectSettings?.menuWidth + 10 : undefined,
           optionFilterProp: "label",
-          popupClassName: 'be-popup-container'
-          // onPaste={(e: any) => handleOnCellPaste(e, indexRow, indexCol)}
-          ,
+          popupClassName: 'be-popup-container',
           loadOptions: column?.editSelectSettings?.loadOptions,
           status: isInvalid ? 'error' : undefined,
           dropdownRender: menu => {
@@ -459,27 +429,26 @@ const EditableCell = props => {
           onChange: (val, item) => {
             console.log('item', item);
             onChange(val);
-          },
-          onBlur: () => {
-            const formState = getValues();
-            // const itemState = getValues(dataIndex)
-
-            // @ts-ignore
-            const prevState = record[dataIndex];
-            // const newState = value
+          }
 
-            // console.log('prevState', prevState)
-            // console.log('newState', newState)
-            // console.log('itemState', itemState)
-            if (value !== prevState) {
-              // @ts-ignore
-              handleCellChange?.({
-                key: record[rowKey],
-                record: formState,
-                type: 'blur'
-              });
-            }
-          },
+          // onBlur={() => {
+          //   const formState = getValues()
+          //   // const itemState = getValues(dataIndex)
+          //
+          //   // @ts-ignore
+          //   const prevState = record[dataIndex]
+          //   // const newState = value
+          //
+          //   // console.log('prevState', prevState)
+          //   // console.log('newState', newState)
+          //   // console.log('itemState', itemState)
+          //
+          //   if (value !== prevState) {
+          //     // @ts-ignore
+          //     handleCellChange?.({key: record[rowKey], record: formState, type: 'blur'})
+          //   }
+          // }}
+          ,
           popupClassName: 'be-popup-container'
         });
       case 'treeSelect':

package/lib/grid-component/InternalTable.d.ts

@@ -2,5 +2,6 @@ import React from 'react';
 import type { GridTableProps } from "./type";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
+import './styles.scss';
 declare const InternalTable: <RecordType extends object>(props: GridTableProps<RecordType>) => React.JSX.Element;
 export default InternalTable;

package/lib/grid-component/InternalTable.js

@@ -10,7 +10,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _rcMasterUi = require("rc-master-ui");
 var _antd = require("antd");
 var _icons = require("@ant-design/icons");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _reactResizable = require("react-resizable");
 var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
 var _hooks = require("./hooks");
@@ -21,8 +20,9 @@ require("dayjs/locale/es");
 require("dayjs/locale/vi");
 var _en_US = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/en_US"));
 var _vi_VN = _interopRequireDefault(require("rc-master-ui/es/date-picker/locale/vi_VN"));
-var _GridEdit = _interopRequireDefault(require("./rc-table/GridEdit"));
-var _Grid = _interopRequireDefault(require("./rc-table/Grid"));
+require("./styles.scss");
+var _GridEdit = _interopRequireDefault(require("./table/GridEdit"));
+var _Grid = _interopRequireDefault(require("./table/Grid"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 _dayjs.default.extend(_customParseFormat.default);
@@ -54,20 +54,17 @@ const ResizableTitle = props => {
     }, /*#__PURE__*/_react.default.createElement("th", restProps))
   );
 };
-const GridStyle = _styledComponents.default.div.withConfig({
-  displayName: "GridStyle",
-  componentId: "es-grid-template__sc-1awgu8w-0"
-})([".ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;visibility:visible;right:0;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined, props => props.heightTable ? `${props.heightTable}px` : undefined);
 const InternalTable = props => {
   const {
     t,
     columns: propsColumns,
     lang,
     dataSource,
-    allowResizing = true,
+    allowResizing,
     dataSourceFilter: propDataSourceFilter,
     onFilterClick,
     editAble,
+    rowKey,
     ...rest
   } = props;
   const locale = lang && lang === 'en' ? _en_US.default : _vi_VN.default;
@@ -92,6 +89,17 @@ const InternalTable = props => {
     }
     setIsManualUpdate(false);
   }, [dataSource]);
+
+  // ============================ RowKey ============================
+  const getRowKey = _react.default.useMemo(() => {
+    if (typeof rowKey === 'function') {
+      return rowKey;
+    }
+
+    // @ts-ignore
+    return record => record?.[rowKey];
+  }, [rowKey]);
+  console.log('getRowKey', getRowKey);
   const handleSearch = (selectedKeys, confirm) => {
     confirm();
   };
@@ -253,11 +261,14 @@ const InternalTable = props => {
       return {
         ...getColumnSearchProps(col),
         ...col,
+        dataIndex: col.field ?? col.dataIndex,
         title: col.headerText ?? col.title,
         ellipsis: col.ellipsis !== false,
+        align: col.textAlign ?? col.align,
+        fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed,
         onFilter: (value, record) => {
           // @ts-ignore
-          return record[column?.dataIndex];
+          return record[col.field ?? col.dataIndex];
         },
         onHeaderCell: () => ({
           width: col.width,
@@ -269,13 +280,13 @@ const InternalTable = props => {
   const mergedColumns = _react.default.useMemo(() => {
     return transformColumns(columns);
   }, [transformColumns, columns]);
+
+  // console.log('mergedColumns', mergedColumns)
+
+  const triggerChangeColumns = () => {};
+  const triggerChangeData = () => {};
   const TableComponent = editAble ? _GridEdit.default : _Grid.default;
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(GridStyle, {
-    heightTable: props.style?.minHeight,
-    style: {
-      position: 'relative'
-    }
-  }, /*#__PURE__*/_react.default.createElement(TableComponent, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(TableComponent, (0, _extends2.default)({}, rest, {
     tableRef: tableRef,
     dataSource: data,
     components: {
@@ -283,10 +294,16 @@ const InternalTable = props => {
         cell: allowResizing ? ResizableTitle : undefined
       }
     },
-    columns: mergedColumns,
+    columns: mergedColumns
+    // columns={columns}
+    ,
     showSorterTooltip: {
       target: 'sorter-icon'
-    }
-  }))));
+    },
+    triggerChangeColumns: triggerChangeColumns,
+    triggerChangeData: triggerChangeData,
+    rowKey: rowKey,
+    getRowKey: getRowKey
+  }));
 };
 var _default = exports.default = InternalTable;

package/lib/grid-component/TableGrid.d.ts

@@ -3,7 +3,8 @@ import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import type { GridTableProps } from "./type";
 type GridProps<T> = GridTableProps<T> & {
-    setColumns?: any;
+    triggerChangeColumns?: () => void;
+    triggerChangeData?: () => void;
     tableRef: any;
 };
 declare const TableGrid: <RecordType extends object>(props: GridProps<RecordType>) => React.JSX.Element;

package/lib/grid-component/TableGrid.js

@@ -22,6 +22,9 @@ var _LoadingSpinner = _interopRequireDefault(require("./LoadingSpinner"));
 var _ColumnsChoose = require("./ColumnsChoose");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import {useMergedState} from "rc-util";
+// import useMergedState from 'rc-util/lib/hooks/useMergedState';
+
 const convertFilters = filters => {
   const result = [];
   filters.forEach(({
@@ -70,7 +73,6 @@ const convertFilters = filters => {
 const useStyle = (0, _antdStyle.createStyles)(({
   css
 }) => {
-  // const { antCls } = token
   const antCls = 'ui-rc';
   return {
     customTable: css`
@@ -89,6 +91,8 @@ const useStyle = (0, _antdStyle.createStyles)(({
 });
 // type OnChange = NonNullable<TableProps<any>['onChange']>;
 
+// const EMPTY_LIST: React.Key[] = [];
+
 const TableGrid = props => {
   const {
     columns,
@@ -116,20 +120,31 @@ const TableGrid = props => {
     onFilterClick,
     dataSourceFilter: propDataSourceFilter,
     loading,
-    setColumns,
-    // dataSourceFilter,
+    triggerChangeColumns,
     ...rest
   } = props;
   const {
     styles
   } = useStyle();
+  const {
+    mode,
+    type,
+    checkboxOnly,
+    hideSelectAll,
+    columnWidth,
+    selectedRowKeys
+    // defaultSelectedRowKeys
+  } = selectionSettings || {};
   const clickRef = (0, _react.useRef)(null);
   const menuRef = (0, _react.useRef)(null);
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
-  const defaultSelected = (0, _react.useMemo)(() => {
-    return selectionSettings?.defaultSelectedRowKeys ?? [];
-  }, [selectionSettings?.defaultSelectedRowKeys]);
+
+  // const defaultSelected = useMemo(() => {
+  //   return defaultSelectedRowKeys ?? []
+  //
+  // }, [defaultSelectedRowKeys])
+
   const [menuVisible, setMenuVisible] = _react.default.useState(false);
   const [selectedRowData, setSelectedRowData] = _react.default.useState(null);
   const [position, setPosition] = _react.default.useState({
@@ -138,7 +153,25 @@ const TableGrid = props => {
     viewportWidth,
     viewportHeight
   });
-  const [selectedRowKeys, setSelectedRowKeys] = (0, _react.useState)(defaultSelected);
+
+  // const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>(defaultSelected);
+
+  // ========================= Keys =========================
+  // const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(
+  //   selectedRowKeys || defaultSelectedRowKeys || EMPTY_LIST,
+  //   {
+  //     value: selectedRowKeys,
+  //   },
+  // );
+
+  // Reset if rowSelection reset
+
+  // React.useEffect(() => {
+  //   if (!selectionSettings) {
+  //     setMergedSelectedKeys(EMPTY_LIST);
+  //   }
+  // }, [!!selectionSettings]);
+
   const contextMenuItems = _react.default.useMemo(() => {
     if (typeof contextMenuHidden === "function" && propContextMenuItems && selectedRowData) {
       const hiddenItems = contextMenuHidden({
@@ -206,7 +239,17 @@ const TableGrid = props => {
       });
     }
   };
-  const handleRowClick = () => {
+  const handleRowClick = () => () => {
+    // console.log(data)
+    // console.log(index)
+
+    // const key = getRowKey(record, index);
+
+    // console.log('key', key)
+
+    if (checkboxOnly !== true) {
+      if (type === 'single') {}
+    }
     if (clickRef.current) return;
 
     // @ts-ignore
@@ -228,7 +271,7 @@ const TableGrid = props => {
   };
   const onSelectChange = (keys, selectedRows, info, selectedRow) => {
     if (info.type === 'all') {
-      // setSelectedRowKeys(keys)
+      // setMergedSelectedKeys(keys)
       rowSelected?.({
         selected: selectedRows,
         type: 'rowSelected',
@@ -236,7 +279,7 @@ const TableGrid = props => {
       });
     } else {
       if (selectionSettings?.type === 'multiple') {
-        // setSelectedRowKeys(keys)
+        // setMergedSelectedKeys(keys)
         rowSelected?.({
           selected: selectedRows,
           type: 'rowSelected',
@@ -244,7 +287,7 @@ const TableGrid = props => {
         });
       } else {
         // @ts-ignore
-        setSelectedRowKeys([selectedRow[rowKey]]);
+        setMergedSelectedKeys([selectedRow[rowKey]]);
         rowSelected?.({
           selected: [selectedRow],
           type: 'rowSelected',
@@ -300,19 +343,21 @@ const TableGrid = props => {
     onRow: (data, index) => {
       return {
         onDoubleClick: handleRowDoubleClick(data, index),
-        onClick: handleRowClick,
+        // onClick: handleRowClick,
+        onClick: handleRowClick(),
         onContextMenu: onContextMenu(data)
       };
     },
     rowSelection: {
-      type: selectionSettings?.mode === 'checkbox' || selectionSettings?.type === 'multiple' ? 'checkbox' : "radio",
-      columnWidth: !selectionSettings?.mode ? 0.0000001 : selectionSettings?.columnWidth ?? 50,
+      ...selectionSettings,
+      type: selectionSettings?.mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
+      columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,
       onChange: onSelectChange,
-      selectedRowKeys: selectionSettings?.mode === 'checkbox' && selectionSettings?.type === 'single' ? selectedRowKeys : undefined,
+      selectedRowKeys: mode === 'checkbox' && type === 'single' ? selectedRowKeys : undefined,
       defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
       preserveSelectedRowKeys: true,
       ...rowSelection,
-      hideSelectAll: !selectionSettings?.type || selectionSettings?.type === 'single' || selectionSettings?.mode === 'radio' ? true : selectionSettings?.hideSelectAll ?? selectionSettings?.type !== 'multiple'
+      hideSelectAll: !type || type === 'single' || selectionSettings?.mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
     },
     onScroll: () => {
       setMenuVisible(false);
@@ -367,7 +412,7 @@ const TableGrid = props => {
         }
       }), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
         columns: columns,
-        setColumns: setColumns
+        triggerChangeColumns: triggerChangeColumns
       }), /*#__PURE__*/_react.default.createElement("div", null)));
     }
   }, rest)), pagination && pagination.onChange && /*#__PURE__*/_react.default.createElement(_pagination.default

package/lib/grid-component/index.d.ts

@@ -1,2 +1,4 @@
 import InternalTable from './InternalTable';
+import type { ColumnsTable, TableProps, ColumnTable } from './type';
+export type { ColumnsTable, TableProps, ColumnTable };
 export default InternalTable;