CODEWITHSUNDEEP
quasar-frameworkquasar
M.A.T
M.A.T

Reputation: 355

Typing for QTable @request

I tried to implement "Server side pagination, filter and sorting sample" in Typescript.

I used QTableProps['onRequest'] for props typing but it doesn't work:

function onRequest (props: QTableProps['onRequest']) {
   console.log(props);
}

This is the error that TS reported:

Type '(props: ((requestProp: { pagination: { sortBy: string; descending: boolean; page: number; rowsPerPage: number; }; filter: (rows: readonly any[], terms: any, cols?: readonly any[] | undefined, getCellValue?: ((col: any, row: any) => any) | undefined) => readonly any[]; getCellValue: (col: any, row: any) => any; }) =>...' is not assignable to type '(requestProp: { pagination: { sortBy: string; descending: boolean; page: number; rowsPerPage: number; }; filter: (rows: readonly any[], terms: any, cols?: readonly any[] | undefined, getCellValue?: ((col: any, row: any) => any) | undefined) => readonly any[]; getCellValue: (col: any, row: any) => any; }) => void'.
  Types of parameters 'props' and 'requestProp' are incompatible.

Upvotes: 2

Views: 1677

Answers (2)

M.A.T
M.A.T

Reputation: 355

After research, I found that the problem can be solved by using Parameters and NonNullable.

export default defineComponent({
  methods: {
    onRequest(
      props: Parameters<NonNullable<QTableProps['onRequest']>>[0]
    ) {
      // The rest of code
    },
  },
});

Upvotes: 1

Gss86
Gss86

Reputation: 95

Could you please provide a bit more detail on exactly how you are doing this.. Here is an example of how i would achieve the same..

Hope it helps.

<q-table @request="onRequest"/>

import type  { QTableProps } from "quasar";

const onRequest: QTableProps['onRequest'] => ({pagination, filter, getCellValue}) =>{
//... your code here 
}

Upvotes: 2

Related Questions