@handsontable/angular: how to create autocomplete or handsontable type with hot-column

Question

I should create an autocomplete or HOT-in-HOT, using hot-column. For example like this.

<hot-table>
  <hot-column type="handsontable" data="code_id">
    <hot-table [data]="codes" [autoColumnSize]="true">
      <hot-column data="id" [renderer]="codesRenderer.bind(this)"></hot-column>
    </hot-table>
  </hot-column>
</hot-table>

Although it's not working in @handsontable/angular package, but works with setting object -> columns. Like this:

{
        data: 'author_id',
        title: 'Author',
        editor: AuthorEditor,
        type: 'handsontable',
        handsontable: {
          data: this.authorService.getAuthors(),
          autoColumnSize: true,
          columns: [
            {
              data: 'id',
              renderer: (instance, TD, row) => {
                const author: Author = instance.getSourceDataAtRow(row);
                TD.innerText = `${author.first_name} ${author.last_name}`;
              }
            }
          ],
          getValue() {
            var selection = this.getSelected();

            return this.getSourceDataAtRow(selection[0]).id;
          }
        },
        renderer: (instance, TD, row, col, prop, value, cellProperties) => {
          const author = this.authorService.getAuthorById(parseInt(value, 10));

          if (!author) {
            return;
          }

          TD.innerText = `${author.first_name} ${author.last_name}`;
        },
      }

I prefer using <hot-column></hot-column> instead of setting object. How is it possible create handsontable type with <hot-column>?

Andrew Giangrant Andrew Giangrant · Accepted Answer · 2018-08-22T00:49:47

It might look something like this to get a basic autocomplete in your template

<hot-table>
    <hot-column type="autocomplete"
                [source]="['somevalues','here']"
                [strict]="true/false"
    >
    </hot-column>
</hot-table>

Then, just pass in the data like you normally would.

NOTE: Binding to these attributes will hinder performance, especially in tables larger than 2000 cells. Using the settings object will be more optimal than binding.

@handsontable/angular: how to create autocomplete or handsontable type with hot-column

1 Answers