I am displaying a table in the detail panel of another table using material-table. I want to close or remove the existing detail panel on clicking another row data expand icon and open the detail panel of that particular row. This is the codesandbox link im working on https://codesandbox.io/s/material-demo-forked-8zy6z?file=/demo.js:0-2696.
Note: I want to close first and then need to open the other row data detail panel
you can do it with useState
const [activePanel, setActivePanel] = React.useState(null)
now onClick of row you can do something like this
onClick={() => setActivePanel(item._id)}
now you know what is active item
{activePanel && <>your jsx code goes here</>}
You can use tableRef and change the dataManager detail panel type from multiple to single.
import {useRef } from "react";
const tableRef = useRef(0);
<MaterialTable
tableRef={tableRef}
detailPanel={(rowData) => {
if (tableRef.current.dataManager !== null) {
tableRef.current.dataManager.detailPanelType = "single";
}
return (
//your Table here
);
}}
/>
you can do this by adding the following prop in options prop of material-table
detailPanelType: "single",
e.g:
options:{{
detailPanelType: "single",
}}
Related
I have a Resource of campaigns; id field of each campaign linked to a standalone page of URLs, belonging to that campaign. (I still don't know how I'll do it).
I use custom field
import { useRecordContext, useGetOne } from 'react-admin';
import { Link } from 'react-router-dom';
export default () => {
const campaign = useRecordContext();
const { data, isLoading } = useGetOne('campaign', { id: campaign.campaign_id });
const campaignUrlsPage = `/campaign/${campaign.id}/urls/`;
return /*isLoading ? null : */ <Link to={campaignUrlsPage}>{campaign.id}</Link>;
};
Why I commented out isLoading? Strange thing but it's always true, after all I don't notice any artefact that way.
Links are shown in the corresponding ceils, thay are actually ancor tags, but clicking them causes record edit. Yes, I have rowClick="edit" and I really need it.
Additionally, I have UrlField in the grid, and clicking it first shows record edit page but next it directs to the URL.
Can it be fixed?
Thanks in advance.
To support rowClick="edit", each datagrid row has a click handler.
If you put your button in a datagrid, when users click on the button, the click even propagates down to the datagrid row, and the row click event handler fires.
So you must stop event propagation in your link:
export default () => {
const campaign = useRecordContext();
const { data, isLoading } = useGetOne('campaign', { id: campaign.campaign_id });
const campaignUrlsPage = `/campaign/${campaign.id}/urls/`;
return isLoading ? null : (
<Link
to={campaignUrlsPage}
onClick={e => e.stopPropagation()}
>
{campaign.id}
</Link>
);
};
I am working with react with Web API. I need one solution where I wanted to have one Hyperlink for once of the headers of Grid. And once I click's over the hyperlink, I wanted to hide this hyperlink and show other hyperlink (toggle). For Ex-
Those Hyperlinks are not directing anywhere. These are in use to select all Radiobuttons and another Hyperlink is used for unselecting all the Radiobuttons for Grid rows.
It's easy to toggle. But it's a hyperlink, which makes it a little tricky. Does the hyperlink links to anywhere?
Anyway, you can toggle the href in onClick, in order for 'href' take effect before 'href' itself is changed, use setTimeout (10 milliseconds should be enough):
import React from 'react'
const ToggleLinks = () => {
const google = {href:"https://google.ca", text:"google"};
const yahoo = {href:"https://yahoo.ca", text:"yahoo"};
const [link, setLink] = React.useState(google);
const toggleLink = e => {
console.log('clicked')
console.log(e.target)
setTimeout(() => {
setLink(p => {
return p.href === "https://google.ca" ? yahoo : google;
})
}, 10);
}
return (
<div>
<h1>ToggleLinks</h1>
{link.text}
</div>
)
}
export default ToggleLinks
I'm using Ant Design table component: https://ant.design/components/table/#Table
In each row, I'm rendering a title and some link. For example:
Product 1
https://example.com/link/product/1
I'm using the onRow API to open a modal to edit the info for the row, which is working fine. However, the onRow event is also trigged if I click on the link. Is there a way to not trigger the onRow event if I just click on the link in the row, and still keep everything as normal if I click on anywhere on the row cell?
Note: my current work around is using an isEditing state flag, but it's not a good experience since I have to get into "edit mode" and set isEditing to true.
You'd better show your code usage of onRow and columns, If you use onRow.onClick like below:
<Table
onRow={(record, rowIndex) => {
return {
onClick: event => {}, // click row
};
}}
/>
You can custom render of link with Event.stopPropagation() like this:
const columns = [
{
dataIndex: "link",
title: "Link",
render: (value) => {
return (
<a
onClick={(event) => event.stopPropagation()}
href={value}
target="_blank"
>
Link
</a>
);
}
}
]
I have been working on a project in ReactJs where the delete button is required for every row to perform specific delete/edit operation.
Any other grid structure having row-wise edit/delete function will also help.
let's say that you have a posts component, and you want add delete action to each post:
const Posts = () => {
const posts_array = [...]
const deletePost(post_id) => {
delete(post_id)
}
return (
<div>
{posts_array.map(
(post) => <Post
post_data={post}
key={post.id}
handle_delete={()=>deletePost(post.id)}
/>
)}
</div>
);
};
export default Posts;
There is no such specific method which I have found till now! instead, use table format to display rowdata
I have a parent component that renders the following child components:
Object.values(eventData).map((event) => {
return (
<EventsSection
key={event.id}
eventID={event.id}
eventDate={event.date}
/>
);
})
Assuming there are 10-20 records in eventData - upon a certain user action, how can i make the browser window to scroll onto an EventSection records based on its key prop?
You need to use a ref from the id. Something like the below would be enough if the user wanted to click on the list and make the browser scroll to that ref.
function renderEventSection(props) {
const { key, name } = props
const ref = useRef()
const handleClick = () =>
ref.current.scrollIntoView({
behavior: 'smooth',
block: 'start',
});
return (
<div key={key} ref={ref} onClick={handleClick}>
{name}
</div>
)
}
If you need to scroll from outside the list, just move that logic to the parent component or use a React Context (See second example). Also, if you need another event, just change it to any other desired user interaction.
Example for the code above (Click on any of the Data list item)
Example with the scroll from the parent component (Click on any of the buttons and window will scroll to the desired number)