Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

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

Jump to bottom

How to hide checkbox in Table component #1702

Closed
EcutDavid opened this issue Sep 23, 2015 · 10 comments
Closed

How to hide checkbox in Table component #1702

EcutDavid opened this issue Sep 23, 2015 · 10 comments
Labels
component: checkbox This is the name of the generic UI component, not the React module! component: table This is the name of the generic UI component, not the React module!

Comments

@EcutDavid
Copy link

The table component is very good.
But some times, There is no need to use the checkbox, how to hide it?
I found there is no Table Props related with it.
Thanks!
@shaurya947
Copy link
Contributor

The TableBody component has a displayRowCheckbox prop that you can set to false. This will hide the checkbox from the table body rows. Moreover, for the TableHeader, you can set

  • displaySelectAll prop to false, which will hide the checkbox in the header AND
  • adjustForCheckbox prop to false, which will get rid of the space reserved for the Checkbox (this point applies to TableFooter as well).

Hope that helps!

@EcutDavid
Copy link
Author

@shaurya947 Thank you!

@shaurya947
Copy link
Contributor

@EcutDavid closing this. If that didn't work, or if you have any more questions about this, feel free to re-open and comment.

@jma7889
Copy link

jma7889 commented Oct 20, 2015

@shaurya947 Thank you! Hope it goes to the document.

@celiao celiao mentioned this issue Nov 16, 2015
Closed
@alanhamlett alanhamlett mentioned this issue Feb 26, 2016
Closed
@adrianblynch
Copy link

Would these being hidden be a better default?

Sorry to be that person that comments on a closed issue...

@mbrookes
Copy link
Member

mbrookes commented May 9, 2016

@adrianblynch I think so, and I've noted this elsewhere in the past. Table may eventually get an overhaul, so that may be the time to address this.

@mobimation
Copy link

mobimation commented Apr 21, 2017 •
edited
Loading

Disabling checkboxes (thanks @shaurya947!) is also required for accomplishing a more dense display with small row heights. This takes appearance outside of the Material UI mainstream looks, but could be an enabler for compact gauges and such. A fiddle here: https://jsfiddle.net/mobimation/jp3s4159/

@res63661
Copy link

displayRowCheckbox turns it off in the table body but leaves it in the header

@nhalstead
Copy link

Kind of old but I needed figure this out as well, For future note, I found to turn off the header you can use adjustForCheckbox={false} displaySelectAll={false} to turn it off.

@logamanig
Copy link

Setting selectableRows: 'none' willl do

mnajdova pushed a commit to mnajdova/material-ui that referenced this issue Nov 10, 2020
@dmtrKovalenko
[CalendarView] Fix a bunch of regressions (mui#1702)
360ad0a 
* Add jest debug configuration

* Move jest config to separate file

* Change input mask generation logic

* Use new geFormatHelperText date-io method to generate helper text and placeholder

* Update @date-io/jalaali and @date-io/hijiri

* [docs] Update component demo titles

* Fix mask input  issues and update e2e tests

* Optimize new masked input for date range picker

* Remove meaningless comment

* Update component based tests

* Use auto injecting dependencies for hooks

* Remove maskChar prop

* Again remove `date` from the useEffect dependency in usePickerState

* Make keyboard input isFocused mutable ref instead of state

* Introduce renderInput API

* Update DatePickers to include renderApi

* Update TimePicker and DateTimePicker usages

* Fix component tests

* Migrate DateRangePicker  into new API

* Add className prop that attaching to the root of picker view

* Properly pass TextField props in demos

* Fix cypress url port

* Fix labels

* Fix cypress DatePicke.spec.ts

* Fix issues with spreading props overrides

* Fix bugs found by DateRange cypress tests

* Fix TextField variant types

* Fix port for CI docs next start

* [Calendar] Do not open year by clicking space right of arrow icon button

* Refactor internal prop naming for CalendarHeader.tsx

* Fix unexpected month switching on tabbing from the 1st day of month

* Make impossible to focus disabled day/year via keyboard

* Update tests to match new amount of real <Day /> rendered

* Do not focus element and scrollIntoView if `allowedKeyboardControl=false`

* Add cypress tests for year selection keyboard navigation

* Add test for calendar keyboard navigation for disabled days
@zannager zannager added component: table This is the name of the generic UI component, not the React module! component: checkbox This is the name of the generic UI component, not the React module! labels Dec 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: checkbox This is the name of the generic UI component, not the React module! component: table This is the name of the generic UI component, not the React module!
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@jma7889 @mbrookes @shaurya947 @adrianblynch @nhalstead @EcutDavid @res63661 @logamanig @zannager