I'm using http://www.material-ui.com, Is it possible to hide/show columns based on the device? For example, on desktop, I want to show 6 columns but on a phone, I might want to show 3 specific columns. How to do this?
I know I am late but this answer is for someone who wants to do it with only material-ui.
Material-ui provides theme breakpoints and withWidth HOC. Both of them can be used to show/hide columns on device size.
Here is an example of using theme breakpoints to change styles based on device width. Same concept can be used to hide/show columns.
You can specify a CSS className on the corresponding TableHeaderColumn and TableRowColumn elements that is hidden/shown depending on a CSS #media query.
For convenience sake, I'm using Bootstrap below and its "hidden-xs" CSS class, which provides such a media query. You'll see that the "Status" column is hidden when you resize the browser window below a certain width.
https://jsfiddle.net/2uepwbd9/1/
class Example extends React.Component {
render() {
return (
<div>
<Table>
<TableHeader>
<TableRow>
<TableHeaderColumn>ID</TableHeaderColumn>
<TableHeaderColumn>Name</TableHeaderColumn>
<TableHeaderColumn className="hidden-xs">Status</TableHeaderColumn>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableRowColumn>1</TableRowColumn>
<TableRowColumn>John Smith</TableRowColumn>
<TableRowColumn className="hidden-xs">Employed</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>2</TableRowColumn>
<TableRowColumn>Randal White</TableRowColumn>
<TableRowColumn className="hidden-xs">Unemployed</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>3</TableRowColumn>
<TableRowColumn>Stephanie Sanders</TableRowColumn>
<TableRowColumn className="hidden-xs">Employed</TableRowColumn>
</TableRow>
<TableRow>
<TableRowColumn>4</TableRowColumn>
<TableRowColumn>Steve Brown</TableRowColumn>
<TableRowColumn className="hidden-xs">Employed</TableRowColumn>
</TableRow>
</TableBody>
</Table>
</div>
);
}
}
You could use a grid library like reflexbox.
There's a Hidden component that does exactly what you're asking for. See the documentation.
Related
I am having an issue where I can't seem to get TransitionGroup to work with Material UI ReactJS library
My expectation is pretty simple, upon entry into the table the row should be animated in like sliding into the table.
I have tried the following but this only end up scattering the table, the headers and everything becomes out of shape.
Here is what I have tried using the Material UI library for ReactJS
<TableContainer>
<Table aria-label="stats-table">
<TableHead>
<TableRow>
{...}
</TableRow>
</TableHead>
<TransitionGroup
transitionName="fade"
transitionEnterTimeout={1000}
transitionLeaveTimeout={300}
transitionAppearTimeout={1000}
transitionAppear={true}
component="tbody">
<TableBody>
{
(rowsPerPage > 0 ? games.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) : games
).map((row: Game) => (
<SimpleTableRow row={row} key={row.id}/>
))}
{
emptyRows > 0 && (
<TableRow style={{height: 53 * emptyRows}}>
<TableCell colSpan={6}/>
</TableRow>
)
}
</TableBody>
</TransitionGroup>
</TableContainer>
The moment I add the TransitionGroup, the entire table headers and body becomes scattered.
How can I make this work? Thanks
You can try to pass component={null} instead component="tbody".
I was using the older version of React Table for last couple of months and now when i started using Latest version v7, i started facing difficulty in customizing the table while no data is found in the table to be displayed. It doesn't show any message like 'No Rows Found' which was earlier displayed in previous versions of the table. How could i render the noDataComponent.
As v7 is headless, you are responsible for the output under the varying conditions. You likely have something like map() in place to iterate over the data array similar to:
<TableBody>
{page.map((row) => {
prepareRow(row);
return (
<TableRow {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<TableCell {...cell.getCellProps()}>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow>
);
})}
</TableBody>
You can add some code to detect the condition where no rows are found similar to:
{page.length === 0 &&
<TableRow>
<TableCell>
No data to display
</TableCell>
</TableRow>
}
I want to divide a table into 2 halves using a vertical line(e.g. blue line in the image) such that there are 2 sections of columns. Each section of column can have multiple columns as follows (Please pardon my terrible drawing skills). How can I achieve this using material ui table?
Please help me out. Thanks
What I've tried till now(didnt work):
const tableHeaders = this.getTableHeaders()
const tableRows = this.getTableRows()
return (
<div className='segment-table-container'>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell />
<TableCell>Field</TableCell>
<Divider orientation='vertical' />
{tableHeaders}
</TableRow>
</TableHead>
<TableBody>
{tableRows}
</TableBody>
</Table>
</TableContainer>
</div>
)
I have a requirement to show popovers, when clicking on table cell (used Material UI table cell). Tried adding onclick function to cell, but not able to pass the element value to the function. How can I achieve this? Below is the code snippet which used to render table.
<TableBody>
{dataObject.map((data) => (
<TableRow key={data.id}>
<TableCell>
<Button>
{data.info}
</Button>
</TableCell>
<TableCell>
{data.request}
</TableCell>
</TableRow>
))}
</TableBody>
Thanks in advance.
The <TableCell> component is eventually a td/th in your html, so you don't really have a value attached to it (it's not like a pure react component that you can just use value, or an input element that has value that you can access).
What you can do is access the element's innerHTML / textContent to access the content of the cell using the event itself:
const handleCellClick = (e) => {
console.log(e.target.textContent);
}
<TableCell onClick={handleCellClick}>{data.request}</TableCell>
I'm using Material-UI Table with TablePagination in my project. This is how it appears:
Now I want the pagination to be aligned to left instead of right, and on the left I want to add another element, for example Button.
I was able to move the alignment to left by restyling the .spacer element. Here's my code:
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25]}
colSpan={3}
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
SelectProps={{
native: false,
}}
onChangePage={this.handleChangePage}
onChangeRowsPerPage={this.handleChangeRowsPerPage}
ActionsComponent={TablePaginationActions}
classes={{spacer: classes.paginationSpacer}} >
</TablePagination>
</TableRow>
</TableFooter>
Now I'm trying to add another element. I tried to use action property:
action="<div>Some text</div>"
But that is not even showing. Tried to use
component="<td>Some text</td>"
Got the following error: Warning: validateDOMNesting(...): <<th>Some text</th>> cannot appear as a child of <tr>. Same thing with div.
Then I tried something like that:
...
<TableRow>
<TablePagination
...all the props
>
</TablePagination>
<td>Some text</td>
</TableRow>
The text appeared, but it completely scrambled my entire Table:
And <td> is about the only element that was even showing, since TableRow generates, well, <tr> element.
Any ideas how to insert an element in there?
<TableFooter>
<TableRow>
<TablePagination
...all the props
>
</TablePagination>
<TableCell colSpan={1}>
<p>Some text</p>
</TableCell>
</TableRow>
</TableFooter>
hope this can help you
You need to place the TablePagination outside of table all together.Look at the 3 example on the demos https://material-ui.com/components/tables/
<div>
<Table>
...
</Table>
</div>
<TablePagination
...props
>