Display Nested Data In Tables - Vuetify Drilldown Table

Install & Download:

# NPM
$ npm install @wdns/vuetify-drilldown-table
# PNPM
$ pnpm add @wdns/vuetify-drilldown-table

Description:

The Vuetify Drilldown Table is a Vue 3 component that works with Vuetify’s VDataTable and VDataTableServer to create an expandable table structure.

Users can use this component to navigate through different levels by expanding or collapsing rows. This makes it easier to understand and interact with complex datasets.

Basic usage:

1. Import and register the Vuetify Drilldown Table.

// Global Plugin
import { createApp } from 'vue';
import App from './App.vue';
import { createVDrilldownTable } from '@wdns/vuetify-drilldown-table';
const app = createApp(App);
app.use(createVDrilldownTable({
  // options
}));
app.mount('#app');

// Global Component
import { createApp } from 'vue';
import App from './App.vue';
import { VDrilldownTable } from  '@wdns/vuetify-drilldown-table';
const app = createApp(App);
app.component('VDrilldownTable', VDrilldownTable);
app.mount('#app');

<!-- Local -->
<template>
  <VDrilldownTable
    :headers="headers"
    :items="items"
  />
</template>
<script setup>
  import VDrilldownTable from  '@wdns/vuetify-drilldown-table';
  const headers = ref([
    // ...
  ]);
  const items = ref([
    // ...
  ])
</script>

2. All available component props.

colorPercentageChange?: ColorsObject['percentageChange'];
colorPercentageDirection?: ColorsObject['percentageDirection'];
colors?: NonNullable<ColorsObject>;
columnWidths?: number[];
customFilter?: VDataTable['$props']['customFilter'];
customKeyFilter?: VDataTable['$props']['customKeyFilter'];
defaultColors?: ColorsObject['default'];
density?: VDataTable['$options']['density'];
drilldown?: object;
drilldownKey?: string;
elevation?: string | number | undefined;
expandOnClick?: VDataTable['$props']['expandOnClick'];
expanded?: readonly string[] | undefined;
filterKeys?: VDataTable['$props']['filterKeys'];                                        // ? Need more info/testing
filterMode?: VDataTable['$props']['filterMode'];
fixedFooter?: boolean;
fixedHeader?: boolean;
footerBackgroundColor?: string | undefined;
footerColor?: string | undefined;
footers?: Column[];
groupBy?: VDataTable['$props']['groupBy'];
headerBackgroundColor?: string | undefined;
headerColor?: string | undefined;
headers?: VDataTable['$props']['headers'];
height?: string | number | undefined;
hideNoData?: VDataTable['$props']['hideNoData'];
hover?: VDataTable['$props']['hover'];
isDrilldown?: boolean;
item?: (typeof VDataTableRow)['$props']['item'];
itemChildrenKey?: string;
itemSelectable?: VDataTable['$props']['itemSelectable'];
itemValue?: VDataTable['$props']['itemValue'];
items?: VDataTable['$props']['items'];
itemsLength?: number;
itemsPerPage?: VDataTable['$props']['itemsPerPage'];
itemsPerPageOptions?: VDataTable['$props']['itemsPerPageOptions'];
level: number;
levels: number;
loaderProps?: LoaderProps;
loaderSize?: VProgressCircular['$props']['size'];
loaderType?: string | string[] | false | null;
loading?: VDataTable['$props']['loading'];
loadingText?: VDataTable['$props']['loadingText'];
matchColumnWidths?: boolean;
modelValue?: unknown[];
multiSort?: VDataTable['$props']['multiSort'];
mustSort?: VDataTable['$props']['mustSort'];
noDataText?: VDataTable['$props']['noDataText'];
noFilter?: VDataTable['$props']['noFilter'];
page?: VDataTable['$props']['page'];
returnObject?: VDataTable['$props']['returnObject'];
search?: string | undefined;
searchContainerCols?: SearchContainerCols;
searchDebounce?: number | undefined | null;
searchMaxWait?: number | undefined | null;
searchProps?: KeyStringAny;
separator?: 'default' | 'horizontal' | 'vertical' | 'cell' | undefined;
server?: boolean;
selectStrategy?: VDataTable['$props']['selectStrategy'];
showDrilldownWhenLoading?: boolean;
showExpand?: VDataTable['$props']['showExpand'];
showFooterRow?: boolean;
showSearch?: boolean;
showSelect?: VDataTable['$props']['showSelect'];
sortAscIcon?: VDataTable['$props']['sortAscIcon'];
sortBy?: VDataTable['$props']['sortBy'];
tableType?: TableType;