Typescript definition for Table Editor plugin is focused on

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

bernspe 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.)

Add comment

bernspe priority answered 10 months ago

0 0 Best answer

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"],
});

Please insert min. 15 characters.

bernspe 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,

Add comment

Bartosz Cylwik staff answered 10 months ago

0 0 Best answer

Please insert min. 20 characters.

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,
    },
  ],
});

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

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

bernspe

2Support score
16Questions 2Answers 1Snippets