CrowdStrike / ember-headless-table

https://ember-headless-table.pages.dev
MIT License
23 stars 7 forks source link

Argument of type 'Column<DataType>' is not assignable to parameter of type 'Column<unknown>'. #247

Open johanrd opened 7 months ago

johanrd commented 7 months ago

Hi. I get a type error on all column modifiers (e.g. resizeHandle) Argument of type 'Column<DataType>' is not assignable to parameter of type 'Column<unknown>'.

Argument of type 'Column<DataType>' is not assignable to parameter of type 'Column<unknown>'.
  The types returned by 'table.args.named.columns()' are incompatible between these types.
    Type 'ColumnConfig<DataType>[]' is not assignable to type 'ColumnConfig<unknown>[]'.
      Type 'ColumnConfig<DataType>' is not assignable to type 'ColumnConfig<unknown>'.
        Types of property 'value' are incompatible.
          Type '((context: CellContext<DataType>) => ContentValue) | undefined' is not assignable to type '((context: CellContext<unknown>) => ContentValue) | undefined'.
            Type '(context: CellContext<DataType>) => ContentValue' is not assignable to type '(context: CellContext<unknown>) => ContentValue'.
              Types of parameters 'context' and 'context' are incompatible.
                Type 'CellContext<unknown>' is not assignable to type 'CellContext<DataType>'.
                  The types returned by 'column.table.args.named.columns()' are incompatible between these types.
                    Type 'ColumnConfig<unknown>[]' is not assignable to type 'ColumnConfig<DataType>[]'.
                      Type 'ColumnConfig<unknown>' is not assignable to type 'ColumnConfig<DataType>'.
                        Types of property 'value' are incompatible.
                          Type '((context: CellContext<unknown>) => ContentValue) | undefined' is not assignable to type '((context: CellContext<DataType>) => ContentValue) | undefined'.
                            Type '(context: CellContext<unknown>) => ContentValue' is not assignable to type '(context: CellContext<DataType>) => ContentValue'.
                              Types of parameters 'context' and 'context' are incompatible.
                                Type 'CellContext<DataType>' is not assignable to type 'CellContext<unknown>'.
                                  Types of property 'row' are incompatible.
                                    Type 'Row<DataType>' is not assignable to type 'Row<unknown>'.
                                      Type 'unknown' is not assignable to type 'DataType'.glint(2345)

It seems like the Column modifiers does not pass on the types of the Column, and instead always assigns the default Column<T = unknown>:

https://github.com/CrowdStrike/ember-headless-table/blob/8111252521665b76957bf3741678f0a8d6e5b10e/ember-headless-table/src/-private/column.ts#L15

See example of steps to reproduce with resizeHandle:

import Component from '@glimmer/component'
import { headlessTable }  from 'ember-headless-table'
import { ColumnResizing, resizeHandle } from 'ember-headless-table/plugins/column-resizing'

interface ColumnType {
  name: string;
  key: keyof DataType;
}

interface DataType {
  firstName: string;
  lastName: string;
}

export default class HeadlesseTableExample extends Component {

  get columns() : ColumnType[] {
    return [ {name: 'First Name', key: 'firstName'}, {name: 'Last Name', key: 'lastName'}]
  }

  get rows() : DataType[] {
    return [{firstName: 'John', lastName: 'Doe'}]
  }

  table = headlessTable(this, {
    columns: () => this.columns,
    data: () => this.rows,
    plugins: [ ColumnResizing ],
  });

  <template>
    <div {{this.table.modifiers.container}}>
      <table class='border-b w-full' {{this.table.modifiers.container}}>
        <thead>
          <tr>
            {{#each this.table.columns as |column|}}
              <th {{this.table.modifiers.columnHeader column}}>
                {{!--column errors here--}}
                <button {{resizeHandle column}}> 
                  ↔
                </button>
              </th>
            {{/each}}
          </tr>
        </thead>
      </table>
    </div>
  </template>
}