Hidden column

[radni1234]

Is it possible to add hidden column or hide existing column in table?

[PrazSam]

Is this still impossible? Is there any workaround?

[nnixaa]

Hi @PrazSam, unfortunately, we don't have this feature out of the box, could you describe your use case though?

[PrazSam]

Thanks for the quick reply. My table already has lots of columns. Therefore I must reduce columns as much as possible for the ease of view. At least I want to hide the id column from user which contains the unique id for update delete purposes.

[Frisky-]

I got the same problem, did you find workaround ?

[PrazSam]

I'm afraid not. There must be a workaround since it's mentioned that the feature is not a out of the box one. I tried to hide them using css with classes (with column names), but my poor css didn't help or the way they have written, makes it difficult.

[lynings]

I also encountered this problem, but I am by modifying the source to solve this problem. This is my configuration, the interface will not show id Step：

1. To /node_modules/ng2-smart-table/lib/data-set/column.js add show field
2. add [ngStyle]=\"{'display': cell.column.show ? '': 'none'}\" and [ngStyle]=\"{'display': column.show ? '': 'none'}\" to template or hidden]=\"!column.show\" and hidden]=\"!cell.column.show\" To /node_modules/ng2-smart-table/components/thead/rows/thead-titles-row.component.js To /node_modules/ng2-smart-table/components/thead/rows/thead-filters-row.component.js To /node_modules/ng2-smart-table/components/tbody/tbody.component.js To /node_modules/ng2-smart-table/components/thead/rows/thead-form-row.component.js

This is OK.

[allanffg]

@lynings Do you want to create a pull request for this change? Would be good to have in the main build.

[kane-armstrong]

I ran into this problem too, thinking that I'd need a property in the columns section of settings before I could see it in any of the raised events.

Logging the event data to console reveals this not to be the case - all of the fields in your component are in there, regardless of whether or not you show them in the grid.

With that in mind, I don't see how a "show" flag is necessary - just delete the column, you still have access to the property when handling events.

[ouchl]

I am facing the same issue. Here is my workaround. I have id column in data source but not in the settings->columns. When create add id property to event.newData then resolve it. Here is my code for a interview project. onCreateConfirm(event): void { this.service.addInterviewer(event.newData) .then(data => event.newData.interviewer_id = data) .then(data => event.confirm.resolve(event.newData)); } onEditConfirm(event): void { this.service.saveInterviewer(event.data.interviewer_id,event.newData) .then(data => event.confirm.resolve(event.newData)); } addInterviewer(data): Promise { return this.http.post(this.interviewerUrl,data) .toPromise() .then(response => response.json()) .catch(this.handleError); }

saveInterviewer(id,data): Promise { return this.http.put(${this.interviewerUrl}/${id},data) .toPromise() .then(response => response.json()) .catch(this.handleError); }

[phillaurin]

@ouchl Thanks for the idea, I've been jungling with the same problem and it worked for me as well. Real easy to implement !

[ronit123321]

@lynings i did try the hack and it did work, but when i update the columns show attribute on toggle() the table data does not update. Could you point what i may have missed.

[goodwinmcd]

I don't think his hack was meant to toggle the columns, only to hide it when it is first loaded. If you toggle the show attribute to hide/show the column then you will need to update the table settings afterwards.

[hoodslide]

Here's a straightforward way to toggle columns. Comments welcome! In your Grid component class:

export enum ShowColumns { All, Some }

@Component({
  ...
})
@Injectable()
export class GridComponent {
  ShowColumns = ShowColumns;   // exposes enum to template
  settings = this.getSettings();

  private getSettings() {
    return ({
      columns: this.getColumns(this.showColumns),
      actions: { add: false, edit: false, delete: false },
      pager: { display: true, perPage: 10 },
    });
  }

  private setColumns(showColumns: ShowColumns) {
    this.settings = Object.assign({}, this.getColumns(showColumns));
  }

  private getColumns(showColumns: ShowColumns) {
    let columns = {
        status: {
          title: 'Status',
          filter: false,
          editable: false,
          type: 'custom',
          renderComponent: StatusCellComponent,
        },
        customer: {
          title: 'Customer',
          filter: false,
          editable: false,
        },
    };
    if (showColumns == ShowColumns.All) {
      columns['one_more'] = {
        title: 'Uno Mas',
        filter: false,
        editable: false,
        sort: false,
        type: 'custom',
        width: '66px',
        renderComponent: SomeCellComponent,
      };
    }
    return columns;
  }

[lucasalvarezlacasa]

There's no out of the box solution for this yet? I'm facing the same problem, I don't want the end user to see the ID column for safety reasons.

Any suggestions?

[lucasalvarezlacasa]

+1 to @kane-armstrong, if you don't want to display a field on the table, just ignore it on the settings and you will be good to go. Later on, when you receive the event information (for add, edit and delete), everything that you originally set in the source will be there :).

[ame589]

Any solutions?

[StevePires]

Can't believe this hasn't been added yet... the solution is so straight forward... There has been a PR for 2 months and it has been pending since because of Travis CI...

[Huyliver6793]

I got the same problem, my solution is fix code in file node_module but i don't want fix it because every time, i run npm install, it will reset. Is there any solution?

[sugiserv]

@Huyliver6793 you could fork the repository, modify the code and use your own repository in your project.

[AndyCyberSec]

Actually it's very simple: You make a table data model with all the data you need. Then in columns settings simply do not wite or just comment the columns you do not want to show. So when selecting, deleting or updating rows you will still have id field property (for example) although it is not shown in table columns

[ame589]

i want to hide and show dinamically!

2018-07-09 11:24 GMT+02:00 Andrea Bruschi notifications@github.com:

Actually it's very simple: You make a table data model with all the data you need. Then in columns settings simply do not wite or just comment the columns you do not want to show. So when selecting, deleting or updating rows you will still have id field (for example) although it is not shown in table columns

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/akveo/ng2-smart-table/issues/95#issuecomment-403416648, or mute the thread https://github.com/notifications/unsubscribe-auth/AGWO2UR6mqTJOX7q7guugUb-sHzJVMi6ks5uEyEygaJpZM4K_YJs .

-- Amedeo Tortora

phone: +39 3480124800 skype: amedeo.tortora

[nwzhaider]

Add class: 'd-none' in settings to hide the column as below...

settings = { columns: { column: { title: 'col', class: 'd-none'

  },....

[lenichols]

Why isnt this a part of the build? toggling colums seems to be a hott topic in the issue thread... can anyone construct notes on how to show/hide?

[avdbrink]

I needed this as well. I've build the same solution as @lynings and pushed it to npm @avdbrink/ng2-smart-table. Here's my PR

[suyogbaldota-zibtek]

Do we have any solution for hiding a column in ng2-smart-table (of version 1.5.0) for Angular 8?

I also encountered this problem, but I am by modifying the source to solve this problem. This is my configuration, the interface will not show id Step：

1. To /node_modules/ng2-smart-table/lib/data-set/column.js add show field
2. add [ngStyle]=\"{'display': cell.column.show ? '': 'none'}\" and [ngStyle]=\"{'display': column.show ? '': 'none'}\" to template or hidden]=\"!column.show\" and hidden]=\"!cell.column.show\" To /node_modules/ng2-smart-table/components/thead/rows/thead-titles-row.component.js To /node_modules/ng2-smart-table/components/thead/rows/thead-filters-row.component.js To /node_modules/ng2-smart-table/components/tbody/tbody.component.js To /node_modules/ng2-smart-table/components/thead/rows/thead-form-row.component.js

This is OK.

[sivaprasadbkamath]

Is it a part now atleast???

[angelo24983]

@lynings Do you want to create a pull request for this change? Would be good to have in the main build.

[manar-mk]

Hi guys, any updates on this issue?

[vamidi]

Think this issue can be closed because of pull https://github.com/akveo/ng2-smart-table/pull/1151