Getting an error when i create react based Azure Devops Table with check box
binoymoolayil opened this issue · 4 comments
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>
);
}
}
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>()
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.
@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.
Obrigado