I have an multigrid table in react virtualized and I cant change the style yo rtl .
I tried the props in document didn't work :(
I want my fixed columns to start from right
<AutoSizer>
{({ height, width }) => (
<MultiGrid
style={{ direction: "rtl" }}
cellRenderer={cellRenderer}
fixedColumnCount={2}
fixedRowCount={1}
height={500}
rowHeight={40}
rowCount={heightcount}
columnCount={headercolumns.length}
columnWidth={({ index }) => headercolumns[index].width}
width={width}
scrollToAlignment="end"
/>
)}
</AutoSizer>
Related
I'm using MUI V.5 with React.
And I would like to display an image in my grid, when rows are empty (when the user search for a product into the grid and can't find any result).
But I don't know how to access to this part sin filas (img reference)
enter image description here
{products ? (
<Box component="div" style={{ width: '100%' }}>
<DataGrid
rows={rows}
columns={columns}
checkboxSelection={true}
autoHeight
density="comfortable"
/>
</Box>
) : (
<div>Loading</div>
)}
</>
You can define a new component and override NoRowsOverlay component of MUI datagrid like this:
const MyCustomNoRowsOverlay = () => (
<img src="/no-items-found.jpg" alt="no-item" />
);
<DataGrid
components={{
NoRowsOverlay: MyCustomNoRowsOverlay
}}
You can take a look at this sandbox for a live working example of this solution.
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
I'm using material-table in my React App. I want to add left and right border to the table.
Here is the code for overriding Header and Body components.
components={{
Header: props => (
<Box ml={2} mr={2}>
<MTableHeader {...props}/>
</Box>
),
Body: props => (
<Box ml={2} mr={2}>
<MTableBody {...props}/>
</Box>
),
}}
When I try to add the borders, table header and body is distorted like this:
I also tried overriding the Table component with Paper but it looks like Paper is a wrapper to the actual table.
Is there a way I can change the default static classname for List and/or Grid?
className="sample-classname" just appends to the current classsname :(
here is my sample code
<WindowScroller>
{({ height, width, isScrolling, onChildScroll, scrollTop }) => (
<List
className="sample-classname"
ref={setRef}
autoHeight
height={height}
width={1140}
isScrolling={isScrolling}
onScroll={onChildScroll}
rowCount={data.size}
rowHeight={this.rowHeight}
rowRenderer={this.rowRenderer}
scrollTop={scrollTop}
overscanRowCount={1}
/>
)}
</WindowScroller>
I'm having trouble with react-virtualized Table (inside InfiniteLoader inside AutoSizer) with custom row renderer. Header row is rendered, but no data rows. Neither rowRenderer or rowGetter even get called for any row. I checked the data is there (this.props.requests).
What am I missing, or, how do I go about debugging?
<AutoSizer>
{({ height, width }) => (
<InfiniteLoader
isRowLoaded={this.isRowLoaded}
loadMoreRows={this.props.loadMoreEntries}
rowCount={(this.props.requests || []).length}
>
{({ onRowsRendered, registerChild }) => (
<Table
deferredMeasurementCache={this._cache}
onRowsRendered={onRowsRendered}
overscanRowCount={2}
ref={registerChild}
height={height}
headerHeight={50}
rowCount={(this.props.requests || []).length}
rowHeight={this._cache.rowHeight}
rowRenderer={this._rowRenderer}
rowGetter={this._rowGetter}
onRowClick={this.rowClicked}
width={width}
>
<Column
dataKey="requestType"
label="RqType"
width={100}
cellRenderer={this._renderRequestType}
/>
...
</Table>
)}
</InfiniteLoader>
)}
</AutoSizer>
My guess would be that the container div has no fixed height, and since you are using the Autosizer your table ends up with height = 0. Try with a fixed height in the props of Table and for the container div (maybe based on the current number of rows * row height).
You can also check that the rowCount is positive, but it should be ok as far as I can tell.