hi i want to ask how to implement material table with lazy loading ? is that possible?
currently im using pagination button but customer want to change to via scroll.or maybe it can implement both.
<MaterialTable
components={{
Cell: props => (
<MTableCell
onDragStart={e => e.preventDefault()}
onContextMenu={e => {
handleEvent(e, props.rowData.tableData.id, props.rowData);
}}
{...props}
/>
),
//current custom pagination via button
Pagination: MTprops => (
<TablePagination
{...MTprops}
count={props.pageCount.total}
page={props.pageCount.current}
rowsPerPage={props.pageCount.limit}
onChangePage={(e, newPageNumber) => handlePageChange(e, newPageNumber, MTprops)}
onChangeRowsPerPage={(e) => {handleRowsPerPageChange(e, MTprops); }}
ActionsComponent={TablePaginationActions}
/>
),
Container: props => <Paper {...props} elevation={0} />
}}
Related
I want to when scrolling body add skeleton loading my items in virtualized list
I use the react-viewport-list package
<ViewportList items={dataTable}>
{(item, index) => (
<Row
data={data}
index={index}
setSize={setSize}
windowWidth={windowWidth}
/>
)}
</ViewportList>
I'm using Material UI Autocomplete to get searched data, it works fine, but it's re-render after the search runs and clears the value without focus, then we have to click again to get fetched value.
here Is my auto-complete component
<AutoCompleteNewDesign
disableClearable
freeSolo
id="combo-box-demo"
onChange={(e, selectValue) => {
setInvoiceSelectedData(selectValue);
}}
options={invoiceSearchList}
getOptionLabel={option => (option ? String(option?.data1) : '')}
renderOption={option => (
<div>
{option.data1} - {option.data2}
</div>
)}
renderInput={params => (
<TextField
params={params}
name="name-here"
variant="outlined"
onChange={e => {
dispatch(
searchName(e.target.value);
}}
/>
)}
filterOptions={filterOptions}
/>
I used this reducer to store data which fecth when user searched
const { searchedNames } = useSelector(state => state.searchReducer);
How to call my dispatch asynchronous as well as prevent this re-render
I am new to React and am building a tab component using Material UI's Tabs component. I'd like to place the Material UI badge component within the Tab component's label prop, but I'm not sure how to go about this.
The Tab component looks as such:
<Tab
key={i}
label={label}
{...globalTabProps}
{...tabProps}
classes={{
wrapper: cx('MuiTab-wrapper'),
}}
/>
I'm trying to add the badge as such:
const label = {
<Badge
color="primary"
className={
badgeProps.badgeContent === ''
? classNames(classes.MuiBadge, classes.MuiBadgeDotted)
: classNames(classes.MuiBadge, classes.MuiBadgeNumber)
}
badgeContent={''}
invisible={false}
{...globalBadgeProps}
{...badgeProps}
></Badge>
};
Of course, this errors out (parsing error), but I don't think this is the correct way to handle this anyway.
Would anyone be able to point me in the right direction?
Many thanks!
You should wrap it with (), like so.
const label = (
<Badge
color="primary"
className={
badgeProps.badgeContent === ''
? classNames(classes.MuiBadge, classes.MuiBadgeDotted)
: classNames(classes.MuiBadge, classes.MuiBadgeNumber)
}
badgeContent={''}
invisible={false}
{...globalBadgeProps}
{...badgeProps}
></Badge>
)
Note the () wrapping it.
Then do it like so:
<Tab
key={i}
label={label}
{...globalTabProps}
{...tabProps}
classes={{
wrapper: cx('MuiTab-wrapper'),
}}
/>
What it is done inside:
const WhateverComponent = (props) => (
<div>
...
{props.label}
</div>
);
I have multiple switch (around 40 to 70) in a component depending on the number of rows fetched from database. I am rendering each switch with every row in a flatlist (every item is assigned with a ID). In the end, I want to submit all the values and store them in database along with id and and it;s respective switch status (true / false).
I want to do it like a form in HTML where we get all the values of form after submitting the form.
This is the component where flatlist is rendered. I have removed unnecessary code because I am able to display the flat list without any error and warning.
const [stData, setStData] = useState([]);
useEffect(()=> {
// Here I am fetching data from server using axios
// setStData(fetchedData);
})
<View>
<FlatList
data={stData}
keyExtractor={(item) => item.registration_id}
renderItem={(stData) => (
<ListItem
name={stData.item.name}
registrationNo={stData.item.registration_id}
data={stData}
isPresent={stData.item.isPresent}
setData={setStData}
/>
)}
/>
This is ListItem component
<View>
<View>
<Text>{props.name}</Text>
<Text>{props.id}</Text>
</View>
<Switch
trackColor={{ true: "red" }}
thumbColor={"white"}
onValueChange={() =>
props.setData(
props.data.map((item) =>
item.registration_id === props.registrationNo
? { ...item, isPresent: !props.isPresent }
: item
)
)
}
value={props.isPresent}
/>
</View>
Update
Now whenever I am trying to toggle the switch button, TypeError: undefined is not a function (near '...props.data.map...') is occured.
While creating const [isPresent, setIsPresent] = useState(false); at child component, you make it a bit rough unnesserally for adding it afterwards to stData, consider store it there from the begging
// dummy data with { isPresent } at main obj
const [data, setData] = useState(stData.map(obj => {...obj, isPresent: false})
<View>
<FlatList
data={data}
keyExtractor={(item) => item.id}
renderItem={({item, id, isPresent}) => (
<ListItem
name={item}
id={id}
data={data}
setData={setData}
isPresent={isPresent}
/>
)}
/>
</View>
// child component
<View>
<View>
<Text>{props.name}</Text>
<Text>{props.id}</Text>
</View>
<Switch
trackColor={{ true: "red" }}
thumbColor={"white"}
onValueChange={() => props.setData(props.data.map(item => item.id == props.id ? { ...item, isPresent: !props.isPresent } : item)}
value={props.isPresent}
/>
</View>
EDIT
when you call renderItem={(stData) =>,
stData in scope of this renderItem isn't stData from state anymore, including at data={stData}
change it to
<FlatList
data={stData}
keyExtractor={(item) => item.registration_id}
renderItem={({item}) => (
<ListItem
name={item.name}
registrationNo={item.registration_id}
data={stData}
isPresent={item.isPresent}
setData={setStData}
/>
)}
/>
now data={stData}gonna evalute correctly, and data.map will be possible action
I'm trying to figure out how to present data from firestore in a react app, using Ant Design's List.
The List is set up like so:
const data = [
{
title: 'Ant Design Title 1',
},
<List
itemLayout="horizontal"
dataSource={data}
renderItem={item => (
<List.Item>
<List.Item.Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title={{item.title}}
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
/>
</List.Item>
)}
/>
I want to try to put firebase data into the const data - so that the title can be a user.name.
In my component I have:
{loading && <div>Loading ...</div>}
{users.map(user => (
<li key={user.uid}>
I'm trying to convert this to work with Ant Design's list like so:
const data = [
{
//title: `{user.name}`,
title: {user.name},
}
];
<List
itemLayout="horizontal"
dataSource={data}
renderItem={users.map(user => (
// renderItem={item => (
<List.Item>
<List.Item.Meta
// avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title={item.title}
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
/>
</List.Item>
))}
/>
When I try this, I get an error that says:
TypeError: renderItem is not a function
Is there an example of how to put data into an Ant Design list using react?
If your firebase users source is an array of objects then just add it directly to dataSource prop.
<List
itemLayout="horizontal"
dataSource={users}
renderItem={item => (
<List.Item>
...
</List.Item>
)}
/>