Expandable doesn't match cellFormatters signature

[crackcomm]

Code from Compact expandable table does not work in patternfly-react-seed with "@patternfly/react-table": "^2.13.43".

Error message:

Types of property 'cellFormatters' are incompatible.

Full type error:

Property 'state' in type 'CompactExpandableTable' is not assignable to the same property in base type 'PureComponent<{}, IState, any>'.
  Type '{ cells: (string | { cellFormatters: ((value: ReactNode, extra: IExtra) => ReactNode)[]; props: {}; title: string; } | { props: {}; title: string; cellFormatters?: undefined; })[]; rows: ({ cells: string[]; isOpen?: undefined; fullWidth?: undefined; parent?: undefined; noPadding?: undefined; } | { ...; } | { ...; } ...' is not assignable to type 'Readonly<IState>'.
    Types of property 'cells' are incompatible.
      Type '(string | { cellFormatters: ((value: ReactNode, extra: IExtra) => ReactNode)[]; props: {}; title: string; } | { props: {}; title: string; cellFormatters?: undefined; })[]' is not assignable to type '(string | ICell)[]'.
        Type 'string | { cellFormatters: ((value: ReactNode, extra: IExtra) => ReactNode)[]; props: {}; title: string; } | { props: {}; title: string; cellFormatters?: undefined; }' is not assignable to type 'string | ICell'.
          Type '{ cellFormatters: ((value: ReactNode, extra: IExtra) => ReactNode)[]; props: {}; title: string; }' is not assignable to type 'string | ICell'.
            Type '{ cellFormatters: ((value: ReactNode, extra: IExtra) => ReactNode)[]; props: {}; title: string; }' is not assignable to type 'ICell'.
              Types of property 'cellFormatters' are incompatible.
                Type '((value: ReactNode, extra: IExtra) => ReactNode)[]' is not assignable to type '((value: any) => IDecorator)[]'.
                  Type '(value: ReactNode, extra: IExtra) => ReactNode' is not assignable to type '(value: any) => IDecorator'.

Full code:

/**
 * Table component.
 */
import * as React from 'react';
import {
  IRow,
  ICell,
  Table,
  TableHeader,
  TableBody,
  TableVariant,
  expandable,
} from '@patternfly/react-table';

export interface IState {
  cells: Array<ICell | string>;
  rows: Array<IRow | string[]>;
}

export class CompactExpandableTable extends React.PureComponent<{}, IState> {
  public state = {
    cells: [
      {
        cellFormatters: [expandable],
        props: {},
        title: 'Header cell',
      },
      'Branches',
      {
        props: {},
        title: 'Pull requests'
      },
      '' // deliberately empty
    ],
    rows: [
      {
        cells: ['one', 'two', 'three', 'four']
      },
      {
        cells: ['parent - 1', 'two', 'three', 'four'],
        isOpen: true
      },
      {
        cells: ['child - 1'],
        fullWidth: true,
        parent: 1,
      },
      {
        cells: ['parent - 2', 'two', 'three', 'four'],
        isOpen: false
      },
      {
        cells: ['child - 2'],
        parent: 3
      },
      {
        cells: ['parent - 3', 'two', 'three', 'four'],
        isOpen: false
      },
      {
        cells: ['child - 3'],
        fullWidth: true,
        noPadding: true,
        parent: 5
      }
    ]
  };

  public render() {
    const { cells, rows } = this.state;

    return (
      <Table
        caption="Compact expandable table"
        variant={TableVariant.compact}
        onCollapse={this.onCollapse}
        rows={rows}
        cells={cells}
      >
        <TableHeader />
        <TableBody />
      </Table>
    );
  }

  private onCollapse(_, rowKey, isOpen) {
    const { rows } = this.state;
    /**
     * Please do not use rowKey as row index for more complex tables.
     * Rather use some kind of identifier like ID passed with each row.
     */
    rows[rowKey].isOpen = isOpen;
    this.setState({
      rows
    });
  }
}

export default CompactExpandableTable;

[priley86]

thanks! i can try to address this in #1950. Still working on that now.

[priley86]

i've updated the PR for #1950 over in #2360. Will try to confirm it fixes this before merge. FWIW, the types for ICell are currently the following there... and cellFormatters is included.

export interface ICell {
  title?: string;
  transforms?: ((value: any) => IDecorator)[];
  cellTransforms?: ((value: any) => IDecorator)[];
  columnTransforms?: ((value: any) => IDecorator)[];
  formatters?: ((value: any) => IDecorator)[];
  cellFormatters?: ((value: any) => IDecorator)[];
  props?: any;
  data?: any;
  header?: any;
  cell?: any;
}

[priley86]

i've pushed a workaround for this issue for now and have changed the interface above to accept any types for now:
4acf7c8

IDecorator is not accurate. This should really be more like:

cellFormatters: ((label: IFormatterValueType, { rowIndex, columnIndex, rowData, column, property }: IExtra) => formatterValueType) [];

The current problem w/ this is we have several different names for the formatter and transformer arguments like value and label, width, id, data etc:

export const collapsible = (value: IFormatterValueType, { rowIndex, columnIndex, rowData, column, property }: IExtra) => {

export const cellWidth = (width: number | string) => () => ({

export const sortable = (label: IFormatterValueType, { columnIndex, column, property }: IExtra) => {

export const headerCol = (id: string = 'simple-node') => {

const defaultTitle = (data: IFormatterValueType) =>

It would be nice to shore these up and type them all, but I feel this can be expanded upon in the future and any is the safest solution for now here...We will need more comprehensive test coverage to ensure this safely.

[tlabaj]

closed by PR #2360