Getting an error when i create react based Azure Devops Table with check box

[binoymoolayil]

Table columns used export const checkboxColumns = [ new ColumnSelect(),
{ id: "name", name: "Name", readonly: true, renderCell: renderSimpleCell, width: new ObservableValue(-30), }, { id: "age", name: "Age", readonly: true, renderCell: renderSimpleCell, width: new ObservableValue(-30), }, { id: "gender", name: "Gender", readonly: true, renderCell: renderSimpleCell, width: new ObservableValue(-40), }, ]; Error Message Prompted TS2322: Type '(ColumnSelect | { id: string; name: string; readonly: boolean; renderCell: (rowIndex: number, columnIndex: number, tableColumn: ITableColumn, tableItem: T, ariaRowIndex?: number | undefined) => Element; width: ObservableValue<...>; })[]' is not assignable to type 'ITableColumn[]'. Type 'ColumnSelect | { id: string; name: string; readonly: boolean; renderCell: (rowIndex: number, columnIndex: number, tableColumn: ITableColumn, tableItem: T, ariaRowIndex?: number | undefined) => Element; width: ObservableValue<...>; }' is not assignable to type 'ITableColumn'. Type 'ColumnSelect' is not assignable to type 'ITableColumn'. Types of property 'behaviors' are incompatible. Type 'IBehavior<ITableColumnBehaviorProps<{}>, {}>[]' is not assignable to type 'IBehavior<ITableColumnBehaviorProps, {}>[]'. Type 'IBehavior<ITableColumnBehaviorProps<{}>, {}>' is not assignable to type 'IBehavior<ITableColumnBehaviorProps, {}>'. Types of property 'initialize' are incompatible. Type '((props: Readonly<ITableColumnBehaviorProps<{}>>, component: {}, eventDispatch: IEventDispatch) => void) | undefined' is not assignable to type '((props: Readonly<ITableColumnBehaviorProps>, component: {}, eventDispatch: IEventDispatch) => void) | undefined'. Type '(props: Readonly<ITableColumnBehaviorProps<{}>>, component: {}, eventDispatch: IEventDispatch) => void' is not assignable to type '(props: Readonly<ITableColumnBehaviorProps>, component: {}, eventDispatch: IEventDispatch) => void'. Types of parameters 'props' and 'props' are incompatible. Type 'Readonly<ITableColumnBehaviorProps>' is not assignable to type 'Readonly<ITableColumnBehaviorProps<{}>>'. Types of property 'tableProps' are incompatible. Type 'Partial<ITableProps>' is not assignable to type 'Partial<ITableProps<{}>>'.

Code for Table Creation import * as React from "react"; import { checkboxColumns, tableItems } from "./TableData"; import { ListSelection } from "azure-devops-ui/List"; import { Card } from "azure-devops-ui/Card"; import { Table } from "azure-devops-ui/Table";

export default class TableCheckboxExample extends React.Component { private selection = new ListSelection({ selectOnFocus: true, multiSelect: true });

public render(): JSX.Element {
    return (
        <Card className="flex-grow bolt-table-card" contentProps={{ contentPadding: false }}>
            <Table
                ariaLabel="Table with checkboxes"
                className="table-example"
                columns={checkboxColumns}
                containerClassName="h-scroll-auto"
                itemProvider={tableItems}
                selection={this.selection}
                role="table"
            />
        </Card>
    );
}

}

[woehrl01]

For the next one who is stumbling over this. You can fix/workaround this by changing "strict": false in your tsconfig.json.

The exact "strict" option to disable is: "strictFunctionTypes": false (see strictFunctionTypes)

If you don't want to disable a strict mode, use the following instead to fix/workaround the incompatible types:

function createColumnSelect<T>(): ITableColumn<T> {
    /* workaround incompatible types */
    return new ColumnSelect() as unknown as ITableColumn<T>
}

/* later: */ 
createColumnSelect<ITableItem>()

[AshwaniT]

function createColumnSelect<T>(): ITableColumn<T> {
    /* workaround incompatible types */
    return new ColumnSelect() as unknown as ITableColumn<T>
}

/* later: */ 
createColumnSelect<ITableItem>()

Its not working getting following error Type 'ITableColumn' is missing the following properties from type 'ITableColumn[]': length, pop, push, concat, and 29 more.

[woehrl01]

@AshwaniT it looks like you are trying to set the returned value on the columns property of the table directly. You need to put the returned column definition into an array (with likely additional columns) beforehand.

[ofninfo]

Obrigado