Is there any way in Ant Design to capture the state of whether particular table rows are expanded, and apply that state if the page refreshes or if the component remounts (i.e. when navigating between different routes on a SPA?)
Also is there way to make the expansion of table rows to work like an accordion. I.e. only one row can be expanded at a time?
At this point I am just investigating Ant-D, reading the documentation and playing with small code snippets.
But I can find no documentation on how to do the above (i.e. preserve/restore the state of table/accordions), so I would not know what to try. I certainly could build out custom bits and pieces, but then that would defeat the purpose of having a nice framework.
Hoping for a more elegant solution.
Check the next example, props you should refer to are:
onExpandedRowsChange
onExpand
expandedRowKeys
import { Table, Typography, Select, Radio } from 'antd';
const expandedRowRender = record => (
<Typography.Text code>{record.key}</Typography.Text>
);
export default function App() {
const [expandedRow, setExpandedRow] = useState(0);
const [radioValue, setRadioValue] = useState('accordion');
const [currentRow, setCurrentRow] = useState([]);
return (
<FlexBox>
<Radio.Group
style={{ width: 200 }}
value={radioValue}
onChange={e => setRadioValue(e.target.value)}
>
<Radio value="accordion">Accordion</Radio>
<Radio value="rowState">rowState</Radio>
</Radio.Group>
{radioValue === 'accordion' ? (
<Table
dataSource={dataSource}
columns={columns}
onExpand={(isExpanded, record) =>
setExpandedRow(isExpanded ? record.key : undefined)
}
expandedRowRender={expandedRowRender}
expandedRowKeys={[expandedRow]}
/>
) : (
<>
<Typography.Title>{currentRow}</Typography.Title>
<Table
dataSource={dataSource}
columns={columns}
expandedRowRender={expandedRowRender}
onExpandedRowsChange={setCurrentRow}
/>
</>
)}
</FlexBox>
);
}
Related
I have an array. in which i want to iterate over and do conditional checks and display the correct element. i'm using functional component.
Below is an example :
import React, { useState, useEffect } from "react";
function Job(props) {
const [resp_data, setdata] = useState("");
const [look, setlook] = useState("");
useEffect(() => {
// some api calls happen here and response data is stored in state resp_data
}, [props]);
return (
<>
<div className="product_list">
{resp_data.length > 0
? resp_data.map((item) => {
{item.looking_for === "work" ? (
<div className="card-rows work" key={item.id}>
work
</div>
) : (<div className="card-rows no_work" key={item.id}>
No work
</div>)
}
})
: <div>array length is 0</div>}
</div>
</>
);
}
export default Job;
The response data received from api call happening inside useEffect is stored in state variable resp_data.
if resp_data length is not zero, i need to iterate over the list and check if the field value "looking_for" is equal to "work"
if true display a component , else display another component.
if resp_data length is zero display "array length is zero"
this i want to implement, but i could not find many answers for functional components. i have tried many possible ways by switching, changing the braces etc..my hard luck.
Any help is greatly appreciated.
You are not returning anything from the 'map' function.
resp_data.map((item) => (
item.looking_for === "work" ? (
<div className="card-rows work" key={item.id}>
work
</div>
) : (<div className="card-rows no_work" key={item.id}>
No work
</div>)
)
)
I'd need to change the style of the arrow in react-select. I learned it can be done by using the components prop like in the code sample below.
However, the props coming to DropdownIndicator do not seem to provide any information if the menu is opened. I would need to use that information to change the arrow style depending on whether the menu is open or closed.
How could I get that information?
import ReactSelect, { components } from 'react-select';
...
const DropdownIndicator = (props) => {
const { isFocused } = props;
// Which prop tells if the menu is open? Certainly isFocused is not the correct one.
const caretClass = isFocused ? 'caret-up' : 'caret-down';
return (
<components.DropdownIndicator {...props}>
<div className={`${caretClass}`} />
</components.DropdownIndicator>
);
};
return (<ReactSelect
components={{ DropdownIndicator }}
placeholder={placeholder}
value={value}
onBlur={onBlur}
name={name}
...
/>)
I think react-select is passing all selectProps in custom components. And there is field called menuIsOpen in selectProps which is used to determine whether dropdown is open or not.
So you can access menuIsOpen by following:-
const DropdownIndicator = (props) => {
const { menuIsOpen } = props.selectProps;
// menuIsOpen will tell if dropdown is open or not
const caretClass = menuIsOpen ? 'caret-up' : 'caret-down';
return (
<components.DropdownIndicator {...props}>
<div className={`${caretClass}`} />
</components.DropdownIndicator>
);
};
I'm having issues getting the Detail Panel of Material Table to re-render when there is a change to the tab selection of a Material-UI tab component. What I'm expecting to happen is when I select the second tab in the tab list, the styling and component should re-render to reflect that in the DOM. As of right now that isn't happening. The value property is being updated, but the DOM is never being re-rendered from the value change. The value property I'm passing to the handleChange function is an index. So for 3 tabs, there would be 3 different values (0, 1, 2)
You can see from this example , when you click a subsequent tab in the AppBar, the state is updated and changed automatically. I'm able to effectively change the 'value' property by clicking a different tab, but the Detail Panel is never re-rendered and the first tab is always selected.
This PR had a similar issue but I wasn't able to get any of the answers to work for my need.
import AppBar from '#material-ui/core/AppBar'
import Tabs from '#material-ui/core/Tabs'
import Tab from '#material-ui/core/Tab'
function TableComponent(props) {
const [value, setValue] = React.useState(0)
const handleChange = (event, newValue) => {
setValue(newValue)
}
function getVersionsTabs (rowData) {
const versions = Object.keys(rowData.versions)
var versionList = versions.map(function (name, index) {
const version = rowData.versions[name]
return <Tab key={index} label={version.versionAlias} />
})
return versionList
}
return (
<MaterialTable
...otherProps
detailPanel={
rowData => {
return (
<div>
<AppBar position='static' color='default'>
<Tabs value={value} onChange={handleChange} indicatorColor='primary' textColor='primary'>
{getVersionsTabs(rowData)}
</Tabs>
</AppBar>
</div>
)
}
/>
)
}
Any help is greatly appreciated!
Say I have a <Modal> that takes a <Header> <Content> and <Footer>.
(
<Modal>
<Header>Foo</Header>
<Content>Foo</Content>
<Footer>Foo</Footer>
</Modal>
)
Now, inside my Modal component I'll probably have code like the following:
const header = children.find(child => child.type === Header)
In order to get a reference to the rendered header.
Now, what if from the consumer of the modal, I needed a decorated Header. Let's just call it DecoratedHeader
// DecoratedHeader
const DecoratedHeader = () => <Header>Foo <Icon type="lock" /></Header>
// consumer
(
<Modal>
<DecoratedHeader />
<Content>Foo</Content>
<Footer>Foo</Footer>
</Modal>
)
The line above wouldn't work anymore, as DecoratedHeader type is not Header. However, it IS rendering a Header.
It feels like there's the concept of "interface" which is missing. Ultimately, the Modal cares for a Header to be rendered, but if you wrap it under a "custom" component there's no way for it to know that it is still a Header.
What am I missing?
EDIT
To expand more about my use cases, I don't need an alternative solution. I need to know whether React has support for a mechanism equivalent to an interface, where 2 different Components that comply with the Liskov Substitution Principle (meaning they're swappable) can have a way to be picked by the parent.
Specifically, replacing this "hardcoded implementation" search, with an "interface" search:
-const specificChild = children.find(child => child.type === SomeComponent)
+const componentInterface = children.find(child => ????)
// Get a prop out of that component interface
const { someInterfaceProp } = componentInterface.props;
return (
<div>
{componentInterface} {/* render it on a specific place */}
</div>
)
Assuming the only thing you're going to be doing with these components is rendering them in specific spots of the modal, i would do them as separate props. For example:
const Modal = ({ header, content, footer }) => {
return (
<div>
{header}
<SomethingElseAllModalsHave />
{content}
{footer}
</div>
)
}
// ... used like:
const Example = () => {
return (
<Modal
header={<DecoratedHeader />}
content={<Content>Foo</Content>}
footer={<Footer>Foo</Footer>}
/>
)
}
If you need the modal to not just render the other components, but give them some information too, you could use a render prop. Basically the same as my example above, but now you pass in functions instead of elements
const Modal = ({ header, content, footer }) => {
const [isVisible, setIsVisible] = useState(false);
return (
<div>
{header(isVisible)}
<SomethingElseAllModalsHave />
{content(isVisible)}
{footer(isVisible}
</div>
)
}
// ... used like:
const Example = () => {
return (
<Modal
header={() => <DecoratedHeader />}
content={(isVisible) => <Content>{isVisible ? "Foo" : "Bar"</Content>}
footer={(isVisible) => isVisible ? <Footer>Foo</Footer> : null}
/>
)
}
EDIT:
When you write the JSX <DecoratedHeader/>, the object that is produced contains no information about <Header>. It's basically just an object with a type (ie, a reference to DecoratedHeader) and some props (none in this case). Header only enters the picture when DecoratedHeader is rendered, which won't be until after Modal is rendered.
So whatever the characteristics are that Modal will use to identify what is and is not a header, it needs to be something that is on DecoratedHeader, not just on Header. Perhaps you could add a static property to any component that counts as a header, and then check for that:
const Header = () => {
// Whatever the code is for this component.
}
Header.isHeader = true;
const DecoratedHeader = () => <Header>Foo <Icon type="lock" /></Header>
DecoratedHeader.isHeader = true;
Then you'll look for it something like this (you should use React.Children, because children is not guaranteed to be an array):
const header = React.Children.toArray(children).find(child => child.type.isHeader);
I'm a little uncertain as how to achieve dynamic heights of a List using react-virtualized.
I have a component as follows:
import { List } from 'react-virtualized';
<List
height={400}
rowCount={_.size(messages)}
rowHeight={(index) => {
return 100; // This needs to measure the dom.
}}
rowRenderer={({ key, index, style }) => <Message style={style} {...messages[index]} />}}
width={300}
/>
I have looked at using CellMeasurer as per the docs which says it can be used with the List component but I have no idea how this example actually works...
I've also tried to work out how it has been achieved in the demo code but have also reached a dead end.
Can someone please assist me on how I would measure the DOM to get each items height dynamically.
Sorry you found the docs to be confusing. I will try to update them to be clearer. Hopefully this will help:
import { CellMeasurer, List } from 'react-virtualized';
function renderList (listProps) {
return (
<CellMeasurer
cellRenderer={
// CellMeasurer expects to work with a Grid
// But your rowRenderer was written for a List
// The only difference is the named parameter they
// So map the Grid params (eg rowIndex) to List params (eg index)
({ rowIndex, ...rest }) => listProps.cellRenderer({ index: rowIndex, ...rest })
}
columnCount={1}
rowCount={listProps.rowCount}
width={listProps.width}
>
{({ getRowHeight, setRef }) => (
<List
{...listProps}
ref={setRef}
rowHeight={getRowHeight}
/>
)}
</CellMeasurer>
)
}
There are also demos of this component here showing how it's used.