Vue3EasyDataTable missing default export

[brobert6]

After updating npm typescript packages
"vue-tsc": "^1.8.22" -> 2.1.6 "typescript": "~5.2.0" -> 5.6.2
you get the following build error when importing Vue3EasyDataTable:
import Vue3EasyDataTable from 'vue3-easy-data-table'
error TS1192: Module '"/node_modules/vue3-easy-data-table/types/main"' has no default export.

tsconfig.json is configured properly with "esModuleInterop": true and "allowSyntheticDefaultImports": true.

[ike]

I am also experiencing this -- unfortunately, I'm not entirely certain how to approach a fix for this. For now, I have been expecting the error on that line, just so the app builds:

// eslint-ts-ignore @typescript-eslint/no-default-export
// @ts-expect-error
import DataTable from 'vue3-easy-data-table'
import 'vue3-easy-data-table/dist/style.css'

[tomhah]

Having the same issue 👍

[rohitasare7]

same

[DJ-caddev]

I have a workaround for this issue. Not clean, but working:

// vue3-easy-data-table.d.ts

declare module 'vue3-easy-data-table' {
  import { DefineComponent } from 'vue';

  // Add a default export for the component
  const EasyDataTable: DefineComponent;
  export default EasyDataTable;

  // Retain original exports
  export type SortType = 'asc' | 'desc';
  export type FilterComparison = '=' | '!=' | '>' | '>=' | '<' | '<=' | 'between' | 'in';
  export type Item = Record<string, any>; // eslint-disable-line @typescript-eslint/no-explicit-any
  export type FilterOption =
    | {
        field: string;
        comparison: 'between';
        criteria: [number, number];
      }
    | {
        field: string;
        comparison: '=' | '!=';
        criteria: number | string;
      }
    | {
        field: string;
        comparison: '>' | '>=' | '<' | '<=';
        criteria: number;
      }
    | {
        field: number | string;
        comparison: 'in';
        criteria: number[] | string[];
      }
    | {
        field: string;
        comparison: (value: any, criteria: string) => boolean; // eslint-disable-line @typescript-eslint/no-explicit-any
        criteria: string;
      };
  export type Header = {
    text: string;
    value: string;
    sortable?: boolean;
    fixed?: boolean;
    width?: number;
  };
  export type ServerOptions = {
    page: number;
    rowsPerPage: number;
    sortBy?: string | string[];
    sortType?: SortType | SortType[];
  };
  export type ClickRowArgument = Item & {
    isSelected?: boolean;
    indexInCurrentPage?: number;
  };
  export type UpdateSortArgument = {
    sortType: SortType | null;
    sortBy: string;
  };
  export type HeaderItemClassNameFunction = (header: Header, columnNumber: number) => string;
  export type BodyRowClassNameFunction = (item: Item, rowNumber: number) => string;
  export type BodyItemClassNameFunction = (column: string, rowNumber: number) => string;
  export type TextDirection = 'center' | 'left' | 'right';
}

[Hrva994]

The library is searching for its default export in the vue3-easy-data-table/types/main.d.ts, my approach was to simply add to main.d.ts file, next lines:

• import DataTable from "vue3-easy-data-table/dist/vue3-easy-data-table.es.js";
• export default DataTable;
  Worked like a charm for me.
  Yeah, I did changed the source code directly, but maybe if it is working properly it can be a PR material.
  Do you know any issues with this approach, please let me know.

Here ist the updated main.d.ts:

import DataTable from "vue3-easy-data-table/dist/vue3-easy-data-table.es.js";

export type SortType = 'asc' | 'desc'

export type FilterComparison = '=' | '!=' | '>' | '>=' | '<' | '<=' | 'between'| 'in';

export type Item = Record<string, any>

export type FilterOption = {
  field: string
  comparison: 'between'
  criteria: [number, number]
} | {
  field: string
  comparison: '=' | '!='
  criteria: number | string
} | {
  field: string
  comparison: '>' | '>=' | '<' | '<='
  criteria: number
} | {
  field: number | string
  comparison: 'in'
  criteria: number[] | string[]
} | {
  field: string
  comparison: (value: any, criteria: string) => boolean
  criteria: string
}

export type Header = {
  text: string
  value: string
  sortable?: boolean
  fixed?: boolean
  width?: number
}

export type ServerOptions = {
  page: number
  rowsPerPage: number
  sortBy?: string | string[]
  sortType?: SortType | SortType[]
}

export type ClickRowArgument = Item & {
  isSelected?: boolean
  indexInCurrentPage?: number
}

export type UpdateSortArgument = {
  sortType: SortType | null
  sortBy: string
}

export type HeaderItemClassNameFunction = (header: Header, columnNumber: number) => string
export type BodyRowClassNameFunction = (item: Item, rowNumber: number) => string
export type BodyItemClassNameFunction = (column: string, rowNumber: number) => string

export type TextDirection = 'center' | 'left' | 'right'

export default DataTable;