I am trying to combine a custom CSS table with the react virtualized window scroller. I currently can get the table to display, but am having trouble figuring out how to combine styling to that table, or add any logic to the table rows.
<WindowScroller>
{({ height, isScrolling, onChildScroll, scrollTop }) => (
<Table
autoHeight
width={1000}
height={700}
headerHeight={20}
rowHeight={30}
isScrolling={isScrolling}
onScroll={onChildScroll}
rowCount={table.length}
scrollTop={scrollTop}
rowGetter={({ index }) => table[index]}
>
<Column
label='Item1'
dataKey='item1'
width={150}
/>
<Column
width={200}
label='item2'
dataKey='item2'
/>
<Column
width={200}
label='item3'
dataKey='item3'
/>
<Column
width={150}
label='item4'
dataKey='item4'
/>
<Column
width={200}
label='item5'
dataKey='item5'
/>
</Table>
)}
</WindowScroller>
Definitely review the docs. You'll likely be passing both some type of style props and event props to the components - so you need to understand how those components define and accept those props. This is only possible by reviewing the documentation of the library.
EDIT:
Here are the propTypes for the <Table /> component:
https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md
You'll see that it accepts custom event handlers like onRowClick but also style props like rowStyle
Related
I am using the MUI V5 DataGrid component in my App and I want to customize the Footer component on the datagrid component but can't find any docs on how to go about it. This is the current default footer:
I want to achieve something resembling this:
Is there a way to reorganize the individual components and customize the styling as such? Any help is highly appreciated.
this sample code you can use for a custom footer in data grid MUI v5
first, you write your pagination component with full logic when the client clicked on the page, like this :
const RoundedPagination = () => {
return (
<Stack spacing={2}>
<Pagination
shape="rounded" page={page + 1} onChange={handleChange} count={props.numberOfPages}
renderItem={(item) => (
<PaginationItem
sx={{
color: 'main.0',
}}
components={{previous: ArrowRightRoundedIcon, next: ArrowLeftRoundedIcon}}
{...item}
/>
)}
/>
</Stack>
)
}
then you use this component in data grid like this :
<Grid container item justifyContent={'center'} alignItems={'center'} md={12}>
<DataGrid
page={page}
rows={props.dataGridValue.ROW}
columns={props.dataGridValue.COLUMNS}
autoHeight
headerHeight={52}
rowsPerPageOptions={[10]}
disableColumnMenu
Pagination
hideFooterSelectedRowCount
components={{
Pagination: RoundedPagination,
}}
/>
</Grid>
hope you get your answer good luck ;)
I am using react virtualize table with many sub components in it and have very bad performance when rendering it.
it gets more aweful after scrolling, clicking buttons...
<TableContainer className={classes.table}>
<AutoSizer>
{({ height, width }) => (
<Table
height={height}
width={width}
rowHeight={64}
headerHeight={84}
rowCount={!isLoading ? tableRowsData.length : LOADING_ROWS_COUNT}
gridStyle={{
direction: 'inherit',
}}
rowGetter={({ index }) => getRowRow(index)}
className={classes.table}
rowClassName={getRowClassName}
noRowsRenderer={noRowsRendererHandler}
disableHeader={showEmptyState}
>
{Object.keys(headersConfig).map((key) => {
return (
<Column
key={key}
headerRenderer={({dataKey}) => headersConfig[dataKey].content}
cellRenderer={({ cellData }) => cellData}
dataKey={key}
width={headersConfig[key].width}
/>
)
})}
</Table>
)}
</AutoSizer>
</TableContainer>
the headerConfig is an object with all the column components.
how can I use this table wiser? how can I prevent many unnecessary re-renders?
am I need to use the rowRenderer prop? if so, can I get an example or a link to understand the implementation?
tnx
cheers
On a list view with few columns, the columns are very wide. I'd like to limit the width of at least some of these columns (except the last one):
Still trying to come up to speed on react-admin, react, and material-ui. I'm sure there's some styling involved. Could someone please point me in the right direction? Thanks.
UPDATE:
I added the style as Jozef suggested but no change. Here's what it looks like in Inspect:
There are two options to customize width of cells.
If you want to set width evenly you can change table-layout of Datagrid
<Datagrid style={{tableLayout: 'fixed'}} rowClick="edit">
<TextField source="sourceName" />
<BooleanField source="active" />
<TextField source="organizationName" />
</Datagrid>
If it is not enough, well, we have to create our custom Datagrid with all of its dependencies so we can pass to TableCell component specific width. Be it percent or px value. This is not very well documented so you have to rely on source code which is in ra-ui-materialui
Here's the example
import {
Datagrid,
DatagridBody,
DatagridCell,
TextField,
BooleanField
} from 'react-admin';
import Checkbox from '#material-ui/core/Checkbox';
import TableCell from '#material-ui/core/TableCell';
import TableRow from '#material-ui/core/TableRow';
const CustomDatagridRow = ({ record, resource, id, onToggleItem, children, selected, basePath }) => (
<TableRow key={id}>
<TableCell style={{width="10%"}} padding="none">
{record.selectable && <Checkbox
checked={selected}
onClick={() => onToggleItem(id)}
/>}
</TableCell>
{React.Children.map(children, field => (
<TableCell style={{width: field.props.width}} key={`${id}-${field.props.source}`}>
{React.cloneElement(field, {
record,
basePath,
resource,
})}
</TableCell>
))}
</TableRow>
);
const CustomDatagridBody = props => <DatagridBody {...props} row={<CustomDatagridRow />} />;
const CustomDatagrid = props => <Datagrid {...props} body={<CustomDatagridBody />} />;
<CustomDatagrid style={{tableLayout: 'fixed'}} rowClick="edit">
<TextField width="20%" source="sourceName" />
<BooleanField width="20%" source="active" />
<TextField width="50%" source="organizationName" />
</CustomDatagrid>
I am trying to add bulk action capabilities to <MuiGridList> component in react-admin 2.9.7. While rendering table like this:
<List>
<Datagrid>
<TextField source="id" />
<TextField source="name" />
<EditButton />
</Datagrid>
</List>
Checkboxes are shown in the first column, corresponding to this demo https://marmelab.com/react-admin-demo/#/categories. That's awesome.
Then I have grid layout (which I am switching to dynamically from list view if that's important):
<List>
<MuiGridList
cellHeight={180}
cols={getColsForWidth(width)}
className={classes.gridList}
>
{ids.map(id => (
<GridListTile>
<Checkbox/>
<EditButton to={linkToRecord(basePath, data[id].id)}/>
<ThumbnailField record={data[id]}/>
<GridListTileBar
className={classes.tileBar}
title={data[id].name}
key={id}
/>
</GridListTile>
))}
</MuiGridList>
</List>
This looks like a demo at https://marmelab.com/react-admin-demo/#/products but how can I achieve the same bulk actions capabilities as in <Datagrid> component?
I use react-virtualized Table to render data in real time.
render() {
...
return(
<div>
<AutoSizer disableHeight>
{({width}) => (
<Table
ref="Table"
headerClassName={styles.headerColumn}
height={height}
noRowsRenderer={this._noRowsRenderer}
rowHeight={ rowHeight}
rowGetter={rowGetter}
rowCount={rowCount}
scrollToIndex={scrollToIndex}
sort={this._sort}
sortBy={sortBy}
sortDirection={sortDirection}
width={width}>
<Column
label="Index"
cellDataGetter={({rowData}) => rowData.index}
dataKey="index"
disableSort={!this._isSortEnabled()}
width={60}
/>
<Column
dataKey="name"
disableSort={!this._isSortEnabled()}
headerRenderer={this._headerRenderer}
width={90}
/>
</Table>
)}
</AutoSizer>
</div>
);
}
I want to add glow effect to cells that have been updated. The glow effect can be implemented with css animation
#-webkit-keyframes glow-effect {
from {background-color: red;}
to {background-color: yellow;}
}
How can I know which cells have been updated recently so I can use the glow effect css class to render them?