vxe-table 4.6.5 → 4.6.6

package/packages/custom/src/panel.ts

@@ -1,5 +1,7 @@
-import { defineComponent, h, inject, ref, Ref, VNode, PropType, ComponentOptions } from 'vue'
+import { defineComponent, h, inject, ref, Ref, VNode, PropType, ComponentOptions, TransitionGroup } from 'vue'
+import { VXETable } from '../../v-x-e-table'
 import { formatText } from '../../tools/utils'
+import { addClass, removeClass } from '../../tools/dom'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import VxeModalComponent from '../../modal/src/modal'
 import VxeButtonComponent from '../../button/src/button'
@@ -19,10 +21,16 @@ export default defineComponent({
   setup (props) {
     const $xetable = inject('$xetable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
 
-    const { internalData } = $xetable
+    const { reactData } = $xetable
     const { computeCustomOpts, computeIsMaxFixedColumn } = $xetable.getComputeMaps()
 
     const refElem = ref() as Ref<HTMLDivElement>
+    const bodyElemRef = ref() as Ref<HTMLDivElement>
+    const dragHintElemRef = ref() as Ref<HTMLDivElement>
+
+    const dragColumn = ref<VxeTableDefines.ColumnInfo | null>()
+
+    let prevDropTrEl: any
 
     const handleWrapperMouseenterEvent = (evnt: Event) => {
       const { customStore } = props
@@ -57,12 +65,24 @@ export default defineComponent({
     }
 
     const resetPopupCustomEvent = (evnt: Event) => {
-      resetCustomEvent(evnt)
+      if (VXETable.modal) {
+        VXETable.modal.confirm({
+          content: GlobalConfig.i18n('vxe.custom.cstmConfirmRestore'),
+          className: 'vxe-table--ignore-clear',
+          escClosable: true
+        }).then(type => {
+          if (type === 'confirm') {
+            resetCustomEvent(evnt)
+          }
+        })
+      } else {
+        resetCustomEvent(evnt)
+      }
     }
 
     const handleOptionCheck = (column: VxeTableDefines.ColumnInfo) => {
-      const { collectColumn } = internalData
-      const matchObj = XEUtils.findTree(collectColumn, item => item === column)
+      const { customColumnList } = reactData
+      const matchObj = XEUtils.findTree(customColumnList, item => item === column)
       if (matchObj && matchObj.parent) {
         const { parent } = matchObj
         if (parent.children && parent.children.length) {
@@ -107,11 +127,11 @@ export default defineComponent({
 
     const allCustomEvent = () => {
       const { customStore } = props
-      const { collectColumn } = internalData
+      const { customColumnList } = reactData
       const customOpts = computeCustomOpts.value
       const { checkMethod } = customOpts
       const isAll = !customStore.isAll
-      XEUtils.eachTree(collectColumn, (column) => {
+      XEUtils.eachTree(customColumnList, (column) => {
         if (!checkMethod || checkMethod({ column })) {
           column.visible = isAll
           column.halfVisible = false
@@ -121,9 +141,117 @@ export default defineComponent({
       $xetable.checkCustomStatus()
     }
 
+    const sortMousedownEvent = (evnt: DragEvent) => {
+      const btnEl = evnt.currentTarget as HTMLElement
+      const tdEl = btnEl.parentNode as HTMLElement
+      const trEl = tdEl.parentNode as HTMLElement
+      const colid = trEl.getAttribute('colid')
+      const column = $xetable.getColumnById(colid)
+      trEl.draggable = true
+      dragColumn.value = column
+      addClass(trEl, 'active--drag-origin')
+    }
+
+    const sortMouseupEvent = (evnt: DragEvent) => {
+      const btnEl = evnt.currentTarget as HTMLElement
+      const tdEl = btnEl.parentNode as HTMLElement
+      const trEl = tdEl.parentNode as HTMLElement
+      const dragHintEl = dragHintElemRef.value
+      trEl.draggable = false
+      dragColumn.value = null
+      removeClass(trEl, 'active--drag-origin')
+      if (dragHintEl) {
+        dragHintEl.style.display = ''
+      }
+    }
+
+    const sortDragstartEvent = (evnt: DragEvent) => {
+      const img = new Image()
+      if (evnt.dataTransfer) {
+        evnt.dataTransfer.setDragImage(img, 0, 0)
+      }
+    }
+
+    const sortDragendEvent = (evnt: DragEvent) => {
+      const { customColumnList } = reactData
+      const trEl = evnt.currentTarget as HTMLElement
+      const dragHintEl = dragHintElemRef.value
+      if (prevDropTrEl) {
+        // 判断是否有拖动
+        if (prevDropTrEl !== trEl) {
+          const dragOffset = prevDropTrEl.getAttribute('drag-pos')
+          const colid = trEl.getAttribute('colid')
+          const column = $xetable.getColumnById(colid)
+          if (!column) {
+            return
+          }
+          const cIndex = XEUtils.findIndexOf(customColumnList, item => item.id === column.id)
+          const targetColid = prevDropTrEl.getAttribute('colid')
+          const targetColumn = $xetable.getColumnById(targetColid)
+          if (!targetColumn) {
+            return
+          }
+          // 移出源位置
+          customColumnList.splice(cIndex, 1)
+          const tcIndex = XEUtils.findIndexOf(customColumnList, item => item.id === targetColumn.id)
+          // 插新位置
+          customColumnList.splice(tcIndex + (dragOffset === 'bottom' ? 1 : 0), 0, column)
+        }
+        prevDropTrEl.draggable = false
+        prevDropTrEl.removeAttribute('drag-pos')
+        removeClass(prevDropTrEl, 'active--drag-target')
+      }
+      dragColumn.value = null
+      trEl.draggable = false
+      trEl.removeAttribute('drag-pos')
+      if (dragHintEl) {
+        dragHintEl.style.display = ''
+      }
+      removeClass(trEl, 'active--drag-target')
+      removeClass(trEl, 'active--drag-origin')
+      // 更新顺序
+      customColumnList.forEach((column, index) => {
+        column.renderSortNumber = index
+      })
+    }
+
+    const sortDragoverEvent = (evnt: DragEvent) => {
+      const trEl = evnt.currentTarget as HTMLElement
+      if (prevDropTrEl !== trEl) {
+        removeClass(prevDropTrEl, 'active--drag-target')
+      }
+      const colid = trEl.getAttribute('colid')
+      const column = $xetable.getColumnById(colid)
+      // 是否移入有效元行
+      if (column && column.level === 1) {
+        evnt.preventDefault()
+        const offsetY = evnt.clientY - trEl.getBoundingClientRect().y
+        const dragOffset = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom'
+        addClass(trEl, 'active--drag-target')
+        trEl.setAttribute('drag-pos', dragOffset)
+        prevDropTrEl = trEl
+      }
+      updateDropHint(evnt)
+    }
+
+    const updateDropHint = (evnt: DragEvent) => {
+      const dragHintEl = dragHintElemRef.value
+      const bodyEl = bodyElemRef.value
+      if (!bodyEl) {
+        return
+      }
+      if (dragHintEl) {
+        const warpperEl = bodyEl.parentNode as HTMLElement
+        const warpperRect = warpperEl.getBoundingClientRect()
+        dragHintEl.style.display = 'block'
+        dragHintEl.style.top = `${Math.min(warpperEl.clientHeight - warpperEl.scrollTop - dragHintEl.clientHeight, evnt.clientY - warpperRect.y)}px`
+        dragHintEl.style.left = `${Math.min(warpperEl.clientWidth - warpperEl.scrollLeft - dragHintEl.clientWidth - 16, evnt.clientX - warpperRect.x)}px`
+      }
+    }
+
     const renderSimplePanel = () => {
       const { customStore } = props
-      const { collectColumn } = internalData
+      const { customColumnList } = reactData
       const customOpts = computeCustomOpts.value
       const { maxHeight } = customStore
       const { checkMethod, visibleMethod, trigger } = customOpts
@@ -135,7 +263,7 @@ export default defineComponent({
         customWrapperOns.onMouseenter = handleWrapperMouseenterEvent
         customWrapperOns.onMouseleave = handleWrapperMouseleaveEvent
       }
-      XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
+      XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
         const isVisible = visibleMethod ? visibleMethod({ column }) : true
         if (isVisible) {
           const isChecked = column.visible
@@ -254,12 +382,12 @@ export default defineComponent({
 
     const renderPopupPanel = () => {
       const { customStore } = props
-      const { collectColumn } = internalData
+      const { customColumnList } = reactData
       const customOpts = computeCustomOpts.value
       const { checkMethod, visibleMethod } = customOpts
       const isMaxFixedColumn = computeIsMaxFixedColumn.value
       const trVNs: VNode[] = []
-      XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
+      XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
         const isVisible = visibleMethod ? visibleMethod({ column }) : true
         if (isVisible) {
           const isChecked = column.visible
@@ -270,12 +398,29 @@ export default defineComponent({
           trVNs.push(
             h('tr', {
               key: column.id,
-              class: [`vxe-table-custom-popup--row-level${column.level}`, {
+              colid: column.id,
+              class: [`vxe-table-custom-popup--row level--${column.level}`, {
                 'is--group': isColGroup
-              }]
+              }],
+              onDragstart: sortDragstartEvent,
+              onDragend: sortDragendEvent,
+              onDragover: sortDragoverEvent
             }, [
               h('td', {
-                class: 'vxe-table-custom-popup--column-name'
+                class: 'vxe-table-custom-popup--column-item col--sort'
+              }, [
+                column.level === 1 ? h('span', {
+                  class: 'vxe-table-custom-popup--column-sort-btn',
+                  onMousedown: sortMousedownEvent,
+                  onMouseup: sortMouseupEvent
+                }, [
+                  h('i', {
+                    class: 'vxe-icon-sort'
+                  })
+                ]) : null
+              ]),
+              h('td', {
+                class: 'vxe-table-custom-popup--column-item col--name'
               }, [
                 h('div', {
                   class: 'vxe-table-custom-popup--name',
@@ -283,7 +428,7 @@ export default defineComponent({
                 }, colTitle)
               ]),
               h('td', {
-                class: 'vxe-table-custom-popup--column-visiblw'
+                class: 'vxe-table-custom-popup--column-item col--visible'
               }, [
                 h('div', {
                   class: ['vxe-table-custom--checkbox-option', {
@@ -303,17 +448,16 @@ export default defineComponent({
                 ])
               ]),
               h('td', {
-                class: 'vxe-table-custom-popup--column-fixed'
+                class: 'vxe-table-custom-popup--column-item col--fixed'
               }, [
                 !parent && customOpts.allowFixed ? h(VxeRadioGroupComponent, {
                   modelValue: column.fixed || '',
-                  disabled: isMaxFixedColumn,
                   type: 'button',
                   size: 'mini',
                   options: [
-                    { label: '左侧', value: 'left' },
-                    { label: '不固定', value: '' },
-                    { label: '右侧', value: 'right' }
+                    { label: GlobalConfig.i18n('vxe.custom.setting.fixedLeft'), value: 'left', disabled: isMaxFixedColumn },
+                    { label: GlobalConfig.i18n('vxe.custom.setting.fixedUnset'), value: '' },
+                    { label: GlobalConfig.i18n('vxe.custom.setting.fixedRight'), value: 'right', disabled: isMaxFixedColumn }
                   ],
                   'onUpdate:modelValue' (value: any) {
                     column.fixed = value
@@ -329,47 +473,71 @@ export default defineComponent({
       })
       return h(VxeModalComponent as ComponentOptions, {
         key: 'popup',
-        className: 'vxe-table-custom-popup-warpper vxe-table--ignore-clear',
+        className: 'vxe-table-custom-popup-wrapper vxe-table--ignore-clear',
         modelValue: customStore.visible,
         title: GlobalConfig.i18n('vxe.custom.cstmTitle'),
-        width: 700,
-        maxHeight: 500,
+        width: '40vw',
+        minWidth: 500,
+        height: '50vh',
+        minHeight: 300,
         mask: true,
         lockView: true,
         showFooter: true,
+        resize: true,
         escClosable: true,
+        destroyOnClose: true,
         'onUpdate:modelValue' (value: any) {
           customStore.visible = value
         }
       }, {
         default: () => {
           return h('div', {
+            ref: bodyElemRef,
             class: 'vxe-table-custom-popup--body'
           }, [
-            h('table', {
+            h('div', {
+              class: 'vxe-table-custom-popup--table-wrapper'
             }, [
-              h('colgroup', {}, [
-                h('col'),
-                h('col', {
-                  style: {
-                    width: '80px'
-                  }
-                }),
-                h('col', {
-                  style: {
-                    width: '200px'
-                  }
+              h('table', {}, [
+                h('colgroup', {}, [
+                  h('col', {
+                    style: {
+                      width: '60px'
+                    }
+                  }),
+                  h('col'),
+                  h('col', {
+                    style: {
+                      width: '80px'
+                    }
+                  }),
+                  h('col', {
+                    style: {
+                      width: '200px'
+                    }
+                  })
+                ]),
+                h('thead', {}, [
+                  h('tr', {}, [
+                    h('th', {}, GlobalConfig.i18n('vxe.custom.setting.colSort')),
+                    h('th', {}, GlobalConfig.i18n('vxe.custom.setting.colTitle')),
+                    h('th', {}, GlobalConfig.i18n('vxe.custom.setting.colVisible')),
+                    h('th', {}, GlobalConfig.i18n('vxe.custom.setting.colFixed'))
+                  ])
+                ]),
+                h(TransitionGroup, {
+                  class: 'vxe-table-custom--body',
+                  tag: 'tbody',
+                  name: 'vxe-table-custom--flip'
+                }, {
+                  default: () => trVNs
                 })
-              ]),
-              h('thead', {}, [
-                h('tr', {}, [
-                  h('th', {}, '标题'),
-                  h('th', {}, '是否显示'),
-                  h('th', {}, '是否固定')
-                ])
-              ]),
-              h('tbody', {}, trVNs)
-            ])
+              ])
+            ]),
+            h('div', {
+              ref: dragHintElemRef,
+              class: 'vxe-table-custom-popup--drag-hint'
+            }, GlobalConfig.i18n('vxe.custom.cstmDragTarget', [dragColumn.value ? dragColumn.value.getTitle() : '']))
           ])
         },
         footer: () => {

package/packages/export/src/export-panel.ts

@@ -193,7 +193,7 @@ export default defineComponent({
       return h(VxeModalComponent, {
         modelValue: storeData.visible,
         title: GlobalConfig.i18n(isPrint ? 'vxe.export.printTitle' : 'vxe.export.expTitle'),
-        className: 'vxe-table-export-popup-warpper',
+        className: 'vxe-table-export-popup-wrapper',
         width: 660,
         mask: true,
         lockView: true,

package/packages/export/src/import-panel.ts

@@ -96,7 +96,7 @@ export default defineComponent({
       return h(VxeModalComponent, {
         modelValue: storeData.visible,
         title: GlobalConfig.i18n('vxe.import.impTitle'),
-        className: 'vxe-table-import-popup-warpper',
+        className: 'vxe-table-import-popup-wrapper',
         width: 440,
         mask: true,
         lockView: true,

package/packages/loading/src/loading.ts

@@ -27,7 +27,7 @@ export default defineComponent({
         }]
       }, slots.default ? [
         h('div', {
-          class: 'vxe-loading--warpper'
+          class: 'vxe-loading--wrapper'
         }, slots.default({}))
       ] : [
         h('div', {

package/packages/locale/lang/en-US.ts

@@ -8,7 +8,7 @@ export default {
       text: 'Loading...'
     },
     error: {
-      groupFixed: 'If you use group headers, the fixed columns must be set by group.',
+      groupFixed: 'If you use group headers, the freeze columns must be set by group.',
       groupMouseRange: 'Grouping headers and "{0}" cannot be used at the same time, which may cause errors.',
       groupTag: 'Grouping column header should use "{0}" instead of "{1}", which may cause errors.',
       scrollErrProp: 'The parameter "{0}" is not supported when virtual scrolling is enabled.',
@@ -61,7 +61,7 @@ export default {
       customAll: 'All',
       customConfirm: 'Confirm',
       customRestore: 'Reset',
-      maxFixedCol: 'The maximum number of fixed columns cannot exceed {0}'
+      maxFixedCol: 'The maximum number of Freeze columns cannot exceed {0}'
     },
     grid: {
       selectOneRecord: 'Please choose at least one piece of record!',
@@ -96,7 +96,7 @@ export default {
       endPageTitle: 'End'
     },
     alert: {
-      title: 'Message notification'
+      title: 'System messages'
     },
     button: {
       confirm: 'Confirm',
@@ -109,7 +109,18 @@ export default {
       cstmTitle: 'Column Settings',
       cstmRestore: 'Restore default',
       cstmCancel: 'Cancelar',
-      cstmConfirm: 'Confirm'
+      cstmConfirm: 'Confirm',
+      cstmConfirmRestore: 'Please confirm whether to restore the default column configuration?',
+      cstmDragTarget: 'Moving target: {0}',
+      setting: {
+        colSort: 'Sort',
+        colTitle: 'Title',
+        colVisible: 'Visible',
+        colFixed: 'Freeze column',
+        fixedLeft: 'Left',
+        fixedUnset: 'Unset',
+        fixedRight: 'Right'
+      }
     },
     import: {
       modes: {
@@ -188,9 +199,9 @@ export default {
       customAll: 'All',
       customConfirm: 'Confirm',
       customRestore: 'Reset',
-      fixedLeft: 'Fixed on the left side',
-      fixedRight: 'Fixed on the right side',
-      cancelfixed: 'Unfixed'
+      fixedLeft: 'Freeze on the left',
+      fixedRight: 'Freeze on the right',
+      cancelfixed: 'Unfreeze column'
     },
     input: {
       date: {

package/packages/locale/lang/es-ES.ts

@@ -8,7 +8,7 @@ export default {
       text: 'Cargando...'
     },
     error: {
-      groupFixed: 'Si se utilizan encabezados de grupo, las columnas fijas deben ser establecidas por grupo.',
+      groupFixed: 'If you use group headers, the freeze columns must be set by group.',
       groupMouseRange: 'Los encabezados de agrupación y "{0}" no pueden ser utilizados al mismo tiempo, lo que puede causar errores.',
       groupTag: 'El encabezado de columna de agrupación debería utilizar "{0}" en lugar de "{1}", lo que puede causar errores.',
       scrollErrProp: 'El parámetro "{0}" no es compatible cuando el desplazamiento virtual está habilitado.',
@@ -61,7 +61,7 @@ export default {
       customAll: 'Todo',
       customConfirm: 'Confirmar',
       customRestore: 'Restaurar',
-      maxFixedCol: '最大固定列的数量不能超过 {0} 个'
+      maxFixedCol: 'The maximum number of Freeze columns cannot exceed {0}'
     },
     grid: {
       selectOneRecord: '¡Seleccione al menos un registro!',
@@ -88,7 +88,7 @@ export default {
       nextJump: 'Saltar siguiente página'
     },
     alert: {
-      title: 'Notificación de mensaje'
+      title: 'System messages'
     },
     button: {
       confirm: 'Confirmar',
@@ -101,7 +101,18 @@ export default {
       cstmTitle: 'Column Settings',
       cstmRestore: 'Restore default',
       cstmCancel: 'Cancelar',
-      cstmConfirm: 'Confirm'
+      cstmConfirm: 'Confirm',
+      cstmConfirmRestore: 'Please confirm whether to restore the default column configuration?',
+      cstmDragTarget: 'Moving target: {0}',
+      setting: {
+        colSort: 'Sort',
+        colTitle: 'Title',
+        colVisible: 'Visible',
+        colFixed: 'Freeze column',
+        fixedLeft: 'Left',
+        fixedUnset: 'Unset',
+        fixedRight: 'Right'
+      }
     },
     import: {
       modes: {
@@ -180,9 +191,9 @@ export default {
       customAll: 'Todo',
       customConfirm: 'Confirmar',
       customRestore: 'Restaurar',
-      fixedLeft: '固定在左侧',
-      fixedRight: '固定在右侧',
-      cancelfixed: '取消固定'
+      fixedLeft: 'Freeze on the left',
+      fixedRight: 'Freeze on the right',
+      cancelfixed: 'Unfreeze column'
     },
     entrada: {
       fecha: {

package/packages/locale/lang/ja-JP.ts

@@ -8,7 +8,7 @@ export default {
       text: 'Loading...'
     },
     error: {
-      groupFixed: 'グループのヘッダを使用すると、固定列はグループで設定しなければなりません',
+      groupFixed: 'If you use group headers, the freeze columns must be set by group.',
       groupMouseRange: 'グループ化ヘッダーと「{0}」は同時に使用できません。これによりエラーが発生する可能性があります',
       groupTag: '分组列头应该使用 "{0}" 而不是 "{1}"，这可能会出现错误',
       scrollErrProp: '启用虚拟滚动后不支持该参数 "{0}"',
@@ -61,7 +61,7 @@ export default {
       customAll: '全部',
       customConfirm: '确认',
       customRestore: 'リセット',
-      maxFixedCol: '最大固定列的数量不能超过 {0} 个'
+      maxFixedCol: 'The maximum number of Freeze columns cannot exceed {0}'
     },
     grid: {
       selectOneRecord: '少なくとも1つのレコードを選択してください',
@@ -96,7 +96,7 @@ export default {
       endPageTitle: 'End page'
     },
     alert: {
-      title: 'メッセージ'
+      title: 'System messages'
     },
     button: {
       confirm: '完了',
@@ -109,7 +109,18 @@ export default {
       cstmTitle: 'Column Settings',
       cstmRestore: 'Restore default',
       cstmCancel: 'Cancelar',
-      cstmConfirm: 'Confirm'
+      cstmConfirm: 'Confirm',
+      cstmConfirmRestore: 'Please confirm whether to restore the default column configuration?',
+      cstmDragTarget: 'Moving target: {0}',
+      setting: {
+        colSort: 'Sort',
+        colTitle: 'Title',
+        colVisible: 'Visible',
+        colFixed: 'Freeze column',
+        fixedLeft: 'Left',
+        fixedUnset: 'Unset',
+        fixedRight: 'Right'
+      }
     },
     import: {
       modes: {
@@ -188,8 +199,9 @@ export default {
       customAll: '全部',
       customConfirm: '確定',
       customRestore: 'リセット',
-      fixedLeft: '固定在左侧',
-      fixedRight: '固定在右侧'
+      fixedLeft: 'Freeze on the left',
+      fixedRight: 'Freeze on the right',
+      cancelfixed: 'Unfreeze column'
     },
     input: {
       date: {

package/packages/locale/lang/pt-BR.ts

@@ -8,7 +8,7 @@ export default {
       text: 'Carregando...'
     },
     error: {
-      groupFixed: 'Se você estiver usando cabeçalhos de grupo, as colunas fixas devem ser definidas por grupo.',
+      groupFixed: 'If you use group headers, the freeze columns must be set by group.',
       groupMouseRange: 'Agrupar cabeçalhos e "{0}" não podem ser usados ao mesmo tempo, o que pode causar erros.',
       groupTag: 'O cabeçalho da coluna de agrupamento deve usar "{0}" em vez de "{1}", o que pode causar erros.',
       scrollErrProp: 'O parâmetro "{0}" não é suportado quando a rolagem virtual está habilitada.',
@@ -147,7 +147,7 @@ export default {
       customAll: 'Todos',
       customConfirm: 'Confirmar',
       customRestore: 'Redefinir',
-      maxFixedCol: 'O número máximo de colunas fixas não pode exceder {0}'
+      maxFixedCol: 'The maximum number of Freeze columns cannot exceed {0}'
     },
     grid: {
       selectOneRecord: 'Por favor, selecione pelo menos um registro!',
@@ -174,7 +174,7 @@ export default {
       nextJump: 'Saltar para próxima página'
     },
     alert: {
-      title: 'Notificação de Mensagem'
+      title: 'System messages'
     },
     button: {
       confirm: 'Confirmar',
@@ -184,7 +184,18 @@ export default {
       cstmTitle: 'Column Settings',
       cstmRestore: 'Restore default',
       cstmCancel: 'Cancelar',
-      cstmConfirm: 'Confirm'
+      cstmConfirm: 'Confirm',
+      cstmConfirmRestore: 'Please confirm whether to restore the default column configuration?',
+      cstmDragTarget: 'Moving target: {0}',
+      setting: {
+        colSort: 'Sort',
+        colTitle: 'Title',
+        colVisible: 'Visible',
+        colFixed: 'Freeze column',
+        fixedLeft: 'Left',
+        fixedUnset: 'Unset',
+        fixedRight: 'Right'
+      }
     },
     import: {
       modes: {
@@ -263,9 +274,9 @@ export default {
       customAll: 'Todos',
       customConfirm: 'Confirmar',
       customRestore: 'Redefinir',
-      fixedLeft: 'Fixar à esquerda',
-      fixedRight: 'Fixar à direita',
-      cancelfixed: 'Não fixar'
+      fixedLeft: 'Freeze on the left',
+      fixedRight: 'Freeze on the right',
+      cancelfixed: 'Unfreeze column'
     },
     input: {
       date: {