question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[DataTables] - DataTable should have to option to not include Checkboxes as the first column

See original GitHub issue

Passing plain to DataTable with Checkboxes in rows I am getting:

broken-table

Without plain my table looks nice, but I don’t need those checkboxes on the left:

normal-table

P.S. Oh my god how brilliant is this project! It is a lifesaver! Thank you so much!

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
mlaursencommented, Dec 22, 2016

Feature Request Information:

Currently, the only way to create a table without the insertion of a checkbox is to pass the plain prop. However, a plain table is really used for not enforcing the height limits and the white-space: nowrap enforced in a data table. This ruins the styling of any selection controls, edit dialog columns, and select field columns that appears in the plain table.

Suggested Solution

The DataTable component should be updated to have a new prop: selectableRows that defaults to true. When rendering a row, the TableRow component will only inject the checkbox when !this.context.plain && this.context.selectableRows.

This will allow for the data table’s styles to still be in effect.

Suggested Solution - Alt

Since there is a .md-table-column--plain class name created, it might be better to remove the the styles that force the .md-table-column--data to look like a plain column when in a .md-data-table--plain. Referenced Code. The TableColumn could then have a plain prop and context that would automatically apply the plain class name. The props would have a higher precedent over context – if props.plain is defined, use whatever value over context.plain.

cn({ 'md-table-column--plain': getField(this.props, this.context, 'plain') });

This would allow all columns to automatically be set to plain when in a plain table, and allow the developer to disable the plain styles on specific columns.

Or maybe both of these solutions should be included. 🤷‍♂️

0reactions
frolcommented, Dec 22, 2016

I think, it is a feature, even though it is small (yet very useful for me). I am just prototyping my app, so I can wait for a proper fix released with the next update. Thank you!)

Read more comments on GitHub >

github_iconTop Results From Across the Web

Datatable with checkbox column and option to select or ...
Hi all, Is there anyone who have implemented a DataTable with a checkbox column and then when you tick the checkbox on the...
Read more >
Responsive datatable with first column as checkbox
Trying to make the datatable as responsive, but when I tried, the checkbox in the first column is replaced with expandable icon.
Read more >
How to add Checkbox in Datatable - YouTube
In this video tutorial, you will be able to add checkbox to your datatable column.
Read more >
jQuery DataTables: How to add a checkbox column
In server-side processing mode ( 'serverSide':true ) elements <input type="checkbox"> would exist for current page only. Once page is changed, ...
Read more >
lightning-datatable - documentation - Salesforce Developers
lightning-datatable is not supported on mobile devices. ... This example creates a table whose first column displays a checkbox for row selection.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found