We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hi,
When I use responsible extension and in responsible style , it only shows data field or render function.
this.dtOptions = { pagingType: 'full_numbers', pageLength: 10, serverSide: true, responsive: true, autoWidth: false, language: this.dataTableLanguage, ajax: (dataTablesParameters: any, callback) => { let params = {...dataTablesParameters}; this.countryService.getPaged(params) .subscribe({ next(response) { callback({ recordsTotal: response.recordsTotal, recordsFiltered: response.recordsTotal, data: response.data }); }, error(msg) { callback({ recordsTotal: 0, recordsFiltered: 0, data: [] }); self.notifierService.notify('error', self.translateService.instant('translations.notifier.error.data-fetching-error')); } }); }, order: [ [ 0, 'asc' ] ], columns: [ { data: 'name', orderable: true, }, { data: 'latinName', orderable: true, }, { data: 'alphaCode2', orderable: true, }, /* {data: 'alphaCode3', orderable: true, width: '10%'}, {data: 'currencyCode', orderable: true, width: '10%'}, {data: 'phoneCode', orderable: true, width: '10%'}, {data: 'numberCode', orderable: true, width: '5%'}, {data: 'riskDegree', orderable: true, width: '5%'}, */ { data: 'isDeleted', orderable: true, render: function (data: any, type: any, full: any) { if (data) { return '<span class="badge bg-soft-danger text-danger">' + self.translateService.instant('translations.country.index.grid.cell.delete-no') + '</span>'; } else { return '<span class="badge bg-soft-success text-success">' + self.translateService.instant('translations.country.index.grid.cell.delete-yes') + '</span>'; } } }, { data: null, orderable: false, defaultContent: '', ngTemplateRef: { ref: this.dtActions, context: { captureEvents: self.onCaptureEvent.bind(self) } } } ] };
angular-datatables version: 13.2.5
Thank you in advance for your help
The text was updated successfully, but these errors were encountered:
Hi @aolmez ,
Can you provide link to StackBlitz or GitHub repo to investigate this?
Sorry, something went wrong.
Hi @shanmukhateja ,
you can find sample code link following line. https://github.com/aolmez/datatable-bug
Hello @aolmez
This is because Responsive plugin automatically determines what columns should be visible according to browser width.
You can learn more about this in the documentation here and here
FIX:
Inform Responsive plugin to show all columns in all breakpoints.
this.dtOptions = { ..., columnDefs: [ { className: 'all', targets: '_all' } // apply for all columns ], }
BONUS: You might want to enable scrollX (horizontall scrolling) depending on number of columns.
scrollX
EDIT: Updated targets to set className for all columns.
targets
className
visible
Successfully merging a pull request may close this issue.
Hi,
When I use responsible extension and in responsible style , it only shows data field or render function.
:My Environment
angular-datatables version: 13.2.5
Thank you in advance for your help
The text was updated successfully, but these errors were encountered: