Typescript definition for Table Editor plugin is focused on


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

bernspe pro premium priority asked 10 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.)


Bartosz Cylwik staff answered 10 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,
    },
  ],
});

bernspe pro premium priority answered 10 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 10 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 pro premium priority commented 10 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 10 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,

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • 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