Topic: Typescript definition for Table Editor plugin is focused on example data

bernspe priority asked 6 months ago

Expected behavior v-model:dataset should accept user-specified data, instead... Actual behavior ... it results in this typescript error: Type UnwrapRef is not assignable to type {columns: {label: string, field: string, width?: number, sort?: unknown, defaultValue?: unknown, options?: unknown, inputType?: unknown, left?: number}[], rows: {office?: string, company?: string, employees?: number, international?: boolean}[]} Resources (screenshots, code snippets etc.)

bernspe priority answered 6 months ago

Yours is ok, but mine doesnt work: const inputsData = ref({ columns: [{'label': 'Datum', 'field': 'date', 'editable': false}], rows: dataset9.value.rows })

const dataset9 = ref({ columns: [{'label': 'Datum', 'field': 'date', fixed: true}, {'label': 'Wochentag', 'field': 'weekday'}], rows: [{'date': 'Zahl der Dienste'}] });

interface Dataset9 { columns: { [props: string]: any }[], rows: { [props: string]: string }[], }

Any suggestions?

Bartosz Cylwik staff commented 6 months ago

I see, there is a typescript issue with the rows property. I've added this to our to-fix list.

We can still make it work though. We can assing a type to the rows property so that the typescript wont throw any issues. You can either use types from the Dataset9 interface or create a new interface - for example DatasetRows and apply it to the rows. Like this:

interface Dataset9 {
  columns: { [props: string]: any }[];
  rows: { [props: string]: string }[];

interface DatasetRows {
  [props: string]: string;

const inputsData = ref({
  columns: [{ width: 100, label: "Datum", field: "date", editable: false }],
  rows: dataset9.value.rows as DatasetRows[],
  // rows: dataset9.value.rows as Dataset9["rows"],

bernspe priority commented 6 months ago

Well, that doesn't help. The issue is, that inputsData expects row-types from the example (e.g company, office, etc.) Maybe you just have to clean that?

Bartosz Cylwik staff commented 6 months ago

Yes, we are going to fix that for the next release.

Does setting the type as DatasetRows[] or Dataset9["rows"] not work for you? It doesn't throw typescript errors for me. Did you try changing the type to any?

rows: dataset9.value.rows as any,

Bartosz Cylwik staff answered 6 months ago

Hi! Can you provide some example? I've tried this dataset and it doesn't throw typescript issues for me. Does this dataset show errors for you?

const inputsData = ref({
  columns: [
      width: 250,
      label: "Company",
      field: "company",
      width: 100,
      defaultValue: false,
      inputType: "checkbox",
      label: "International",
      field: "international",
      width: 250,
      inputType: "number",
      defaultValue: 1,
      label: "SomeNumber",
      field: "someNumber",
  rows: [
      company: "Smith & Johnson",
      international: true,
      someNumber: 1,
      company: "P.J. Company",
      international: false,
      someNumber: 1,

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 4.1.1
  • Device: Desktop
  • Browser: Chrome
  • OS: MacOSX
  • Provided sample code: No
  • Provided link: No