@dataloop-ai/components 0.18.77 → 0.18.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.77",
+  "version": "0.18.78",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlTable/DlTable.vue

@@ -332,6 +332,34 @@
                                     {{ col.label }}
                                 </DlTh>
                             </slot>
+                            <DlTh
+                                v-if="hasEditableColumns"
+                                key="visibleColsBtn"
+                            >
+                                <dl-button
+                                    text-color="dl-color-medium"
+                                    flat
+                                    icon="icon-dl-column"
+                                >
+                                    <dl-menu>
+                                        <dl-list separator>
+                                            <dl-option-group
+                                                :model-value="
+                                                    computedVisibleCols
+                                                "
+                                                :options="groupOptions"
+                                                :left-label="true"
+                                                max-width="250px"
+                                                type="switch"
+                                                class="table-options"
+                                                @update:model-value="
+                                                    handleVisibleColumnsUpdate
+                                                "
+                                            />
+                                        </dl-list>
+                                    </dl-menu>
+                                </dl-button>
+                            </DlTh>
                         </DlTr>
 
                         <tr
@@ -583,8 +611,16 @@ import {
 import { injectProp } from '../../../utils/inject-object-prop'
 import { DlTableRow, DlTableProps, DlTableColumn } from './types'
 import { DlPagination } from '../DlPagination'
-import { DlIcon, DlCheckbox, DlProgressBar } from '../../essential'
+import {
+    DlIcon,
+    DlCheckbox,
+    DlProgressBar,
+    DlMenu,
+    DlList
+} from '../../essential'
 import { ResizableManager } from './utils'
+import { DlButton } from '../../basic'
+import { DlOptionGroup } from '../../compound'
 import DlEmptyState from '../../basic/DlEmptyState/DlEmptyState.vue'
 import { v4 } from 'uuid'
 import { flatTreeData } from '../DlTreeTable/utils/flatTreeData'
@@ -606,7 +642,11 @@ export default defineComponent({
         DlProgressBar,
         DlIcon,
         DlCheckbox,
-        DlEmptyState
+        DlEmptyState,
+        DlButton,
+        DlOptionGroup,
+        DlMenu,
+        DlList
     },
     props,
     emits,
@@ -625,6 +665,21 @@ export default defineComponent({
         const virtScrollRef = ref(null)
         const hasVirtScroll = computed(() => props.virtualScroll === true)
 
+        const groupOptions = computed(() =>
+            (props.columns as DlTableColumn[]).map((item) => ({
+                label: item.label,
+                value: item.name
+            }))
+        )
+
+        const visibleColumnsState = ref(
+            (props.columns as DlTableColumn[]).map((col) => col.name)
+        )
+
+        const computedVisibleCols = computed(() =>
+            computedCols.value.map((col) => col.name)
+        )
+
         const { hasAnyAction } = useTableActions(props) // todo: does not work
 
         const getRowKey = computed(() =>
@@ -790,6 +845,13 @@ export default defineComponent({
             }
         )
 
+        watch(
+            () => (props as any).visibleColummns,
+            (value) => {
+                visibleColumnsState.value = value
+            }
+        )
+
         watch(
             () => props.draggable,
             () => {
@@ -950,7 +1012,8 @@ export default defineComponent({
                 props as unknown as DlTableProps,
                 computedPagination,
                 hasSelectionMode,
-                hasDraggableRows
+                hasDraggableRows,
+                visibleColumnsState
             )
 
         const { columnToSort, computedSortMethod, sort } = useTableSort(
@@ -1243,6 +1306,12 @@ export default defineComponent({
             () => Object.keys(props.emptyStateProps).length > 0
         )
 
+        const handleVisibleColumnsUpdate = (columns: string[]) => {
+            if (columns.length < 1) return
+            visibleColumnsState.value = columns
+            emit('update-visible-columns', columns)
+        }
+
         return {
             uuid: `dl-table-${v4()}`,
             rootRef,
@@ -1296,7 +1365,11 @@ export default defineComponent({
             hasSlotHeaderSelection,
             stopAndPrevent,
             updatePagination,
-            hasEmptyStateProps
+            hasEmptyStateProps,
+            groupOptions,
+            visibleColumnsState,
+            handleVisibleColumnsUpdate,
+            computedVisibleCols
         }
     }
 })

package/src/components/compound/DlTable/hooks/tableColumnSelection.ts

@@ -1,4 +1,4 @@
-import { computed, ComputedRef } from 'vue-demi'
+import { computed, ComputedRef, Ref } from 'vue-demi'
 
 import { isNumber } from '../../../../utils/is'
 import { DlTableProps, DlTableColumn, DlTableRow } from '../types'
@@ -12,7 +12,8 @@ export function useTableColumnSelection(
     props: DlTableProps,
     computedPagination: ComputedRef<TablePagination>,
     hasSelectionMode: ComputedRef<boolean>,
-    hasDraggableRows: ComputedRef<boolean>
+    hasDraggableRows: ComputedRef<boolean>,
+    visibleColumnsState: Ref
 ) {
     const colList = computed(() => {
         if (props.columns) {
@@ -40,11 +41,11 @@ export function useTableColumnSelection(
     const computedCols = computed(() => {
         const { sortBy, descending } = computedPagination.value
 
-        const cols = props.visibleColumns
+        const cols = visibleColumnsState?.value
             ? colList.value.filter(
                   (col) =>
                       col.required === true ||
-                      props.visibleColumns.includes(col.name) === true
+                      visibleColumnsState.value.includes(col.name) === true
               )
             : colList.value
 

package/src/components/compound/DlTable/utils/props.ts

@@ -46,6 +46,7 @@ export const props = {
     virtualScroll: Boolean,
     hidePagination: Boolean,
     hideSelectedBanner: Boolean,
+    hasEditableColumns: Boolean,
     selectedRowsLabel: {
         type: Function,
         default: (val: number) => `${val} records selected`

package/src/components/compound/DlTreeTable/emits.ts

@@ -10,6 +10,7 @@ export const emits = [
     'th-click',
     'row-dblclick',
     'row-contextmenu',
+    'update-visible-columns',
     ...useTableRowExpandEmits,
     ...useTreeTableRowSelectionEmits
 ]

package/src/demos/DlTableDemo.vue

@@ -408,6 +408,15 @@
                     </template>
                 </DlTable>
             </div>
+            <div>
+                <p>With editable columns</p>
+                <DlTable
+                    :rows="tableRows"
+                    :columns="tableColumns"
+                    title="Editable Columns"
+                    has-editable-columns
+                />
+            </div>
         </div>
     </div>
 </template>