javascripttypescriptslickgrid

SlickGrid constructor issue with Columns parameter

I have a very simple SlickGrid example loaded into a solution. To do this, I first ran npm install slickgrid, and then incorporated a very basic slickgrid example, which is as follows:

The Typescript file contains the imports and code to initialize the grid:

import { SlickGrid } from 'slickgrid/*';

. . .

var data = [
    { id: 1, title: 'Task 1', duration: '5', percentComplete: 20, start: '1/1/2022', finish: '1/5/2022', effortDriven: false },
    { id: 2, title: 'Task 2', duration: '10', percentComplete: 40, start: '1/6/2022', finish: '1/15/2022', effortDriven: false },
    { id: 3, title: 'Task 3', duration: '15', percentComplete: 60, start: '1/16/2022', finish: '1/30/2022', effortDriven: false },
    { id: 4, title: 'Task 4', duration: '20', percentComplete: 80, start: '2/1/2022', finish: '2/20/2022', effortDriven: false },
    { id: 5, title: 'Task 5', duration: '25', percentComplete: 100, start: '2/21/2022', finish: '3/15/2022', effortDriven: false }
];

var columns = [
    { id: 'id', name: 'ID', field: 'id' },
    { id: 'title', name: 'Title', field: 'title' },
    { id: 'duration', name: 'Duration', field: 'duration' },
    { id: '%', name: '% Complete', field: 'percentComplete' },
    { id: 'start', name: 'Start', field: 'start' },
    { id: 'finish', name: 'Finish', field: 'finish' },
    { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven' }
];

var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
};

var grid = new SlickGrid('#myGrid', data, columns, options);

However, this generates a compiler error. The columns array seems to be expecting the same data type as data. Navigating to the SlickGrid constructor, this seems to make sense, givent the SlickGrid constructor and class export definition:

constructor(protected container: HTMLElement | string, protected data: CustomDataView<TData> | TData[], protected columns: C[], protected options: Partial<O>)

export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O extends BaseGridOption<C> = BaseGridOption<C>>

enter image description here

I have very little UI/UX experience in general, and none with SlickGrid, so I'm sure I've got something set up incorrectly, or I'm using the wrong class/namespace, or something, but I'm not sure how else to diagnose/fix. Thanks in advance for any help/suggestions.

Solution

  • Your import is incorrect, I don't know why VSCode sometime automatically adds the /* but it should really be from 'slickgrid'; (without ending /*). You should read the v5.0 migration guide, there's more info and usage example there, see Annoucement Migration 5.0

    Also it looks like you're using TypeScript since you're getting a TypeScript error, so you should also add the Column type to your columns

    import { Column, SlickGrid } from 'slickgrid';

let columns: Column[] = [
  // ...
];

    Your issue is kind similar to this SlickGrid issue but you're not using dynamic field, so I'm not sure why it would show this error apart from the fact that you should add the Column type like I said (which is probably your problem here). I'm not entirely sure since I don't know if you've put this inside a .ts file or if you're using <script type="module">

    The field type has a TS helper on it and it's supposed to provide more help but you're the second person encountering a problem with it, if it's too much hassle, I might revert to a simple field: string instead. The field helper when it works will help you a lot with the intellisense since it will show you the field of available field when you provide an interface to SlickGrid

    enter image description here