I am trying to add a hyperlink to the cell data Summary which when clicked can open a popover in one of the column.
const columns = [
{
title: 'Name',
data: 'name',
searchable: true
},
{
title: 'Summary',
data: 'instanceName',
searchable: true,
render: (data, type, row) => `
<div>
<p style="color: green">Applied- ${this.calculatecount(row.name)}</p>
</div>
`
];
How to make this Applied - (count) an hyperlink and when clicked should show a popover.
the number of the instances can be large so need to show the list in the popover.
<Popover title="Successfully Applied">
<div>
<p style="color: green">Names of the instances applied</p>
</div>
</Popover>
Related
I am trying to get an Antd dropdown based on an array but it keeps failing with Error: React.Children.only expected to receive a single React element child.
I have seen the other threads about it but I am confused because my menu works if the data is static: Here's a snippet
var items = [
{
key: '0',
label: 'item0',
},
{
key: '1',
label: 'item1',
}
];
var items2 = []
for (let item of items) items2.push({key: items2.length.toString(), label: item.label})
console.log(items, items2, JSON.stringify(items), JSON.stringify(items2), JSON.stringify(items) === JSON.stringify(items2) )
return (<>
<Dropdown menu={{ items }} trigger={['click']}>
<a onClick={(e) => e.preventDefault()}>
{name} <DownOutlined />
</a>
</Dropdown>
<Dropdown menu={{ items2 }} trigger={['click']}>
<a onClick={(e) => e.preventDefault()}>
{name} <DownOutlined />
</a>
</Dropdown>
</>)
As expected, items and items2 are the same by construction, and JSON.stringify(items) === JSON.stringify(items2) ) is true
However, clicking on the first dropdown with items works, while clicking on the second one throws.
How can I solve that issue?
the first works only by coincidence! because the variable name is items and since you have to specify the property name which is also items it works so
{{items}}
is in fact :
{{items:items}}
for the second one you should mention the property items because you have a differently named variable
{{items:items2}}
replace menu={{ items2 }} to menu={{ items: items2 }}
the menu attribute must have the items property
I hope it help
You should write it like this
<Dropdown menu={{ items: items2 }} trigger={["click"]}>
enter image description here
enter image description here
I have a requirement to add tooltip on hover to disabled options in a dropdown in React fluent UI.
I am able to add tooltip to singular component using https://www.npmjs.com/package/#fluentui/react-tooltip
<Tooltipcontent="Example tooltip">
<Button/>
</Tooltip>
but how to add similar behaviour to dropdown options and only for disabled options
like: "Disabled cause of non avilability"
sample dropdown fluent ui code
const options: IDropdownOption[] = [
{ key: 'fruitsHeader', text: 'Fruits', itemType: DropdownMenuItemType.Header },
{ key: 'apple', text: 'Apple' },
{ key: 'banana', text: 'Banana' },
{ key: 'orange', text: 'Orange', disabled: true },
];
export const DropdownBasicExample: React.FunctionComponent = () => {
return (
<Stack tokens={stackTokens}>
<Dropdown
placeholder="Select an option"
label="Basic uncontrolled example"
options={options}
styles={dropdownStyles}
/>
</Stack>
);
};
Thanks
Fluent UI renders every disabled option as a button element with the disabled attribute, which makes it non-interactive by default.
Here's a method to solve this that I believe is also fairly accessible:
First, define your array of IDropdownOption items so that they conditionally set the disabled and title properties:
const options: IDropdownOption[] = [
{ key: 'apple', text: 'Apple' },
{ key: 'orange',
text: 'Orange',
disabled: isOrangeDisabled,
title: isOrangeDisabled ? "This is a disabled tooltip" : ""
},
];
You're also going to need to define a custom rendering function for the items in order to apply a nice tooltip:
<Dropdown onRenderOption={onRenderOption} />
and then define a function like this in your component:
const onRenderOption = (option: IDropdownOption): JSX.Element => {
return (
<>
{option?.disabled && (
<div className="interactive">
<TooltipHost content={option.title}>
<span>{option.text}</span>
</TooltipHost>
</div>
)}
{!option?.disabled && (
<span>{option.text}</span>
)}
</>
);
};
Finally, that interactive CSS class needs to be defined in your CSS file. This will override the browser's default behaviour of making disabled elements non-interactive:
.interactive {
pointer-events: auto;
}
Some things to note:
The reason the title is set to an empty string when the option is not disabled is so that it doesn't have a string value when the interactive item is rendered. Without this, the browser will render the tooltip when you hover on a selectable item, which looks ugly.
Using the title attribute should make the component pretty usable for screen readers and other assistive technology (though I am far from an expert)
The template only renders the TooltipHost and interactive class when the object is disabled, so that the tooltip and that behaviour only kick in when the option is disabled. Because the underlying option is still disabled, you still won't be able to select it.
Hello I want to add a on Row Click to link to another window with id from my api?
<div className="table-responsive">
<MaterialTable
title="Filter/Search/Sort by Column Attribute"
columns={[
{ title: 'Name', field: 'player_name_last_first' },
I want to add that functionality for Name, also the link must include the id which is field: player_id , how can I include that?
You can try rendering a custom div on each cell of the column with your redirect logic onClick.
i.e
<div className="table-responsive">
<MaterialTable
title="Filter/Search/Sort by Column Attribute"
columns={[
{ title: 'Name',
field: 'player_name_last_first',
render: (rowData) =>
<div onClick={ () => { // Your redirect logic with rowData.player_id }>
{rowData.player_name_last_first}
</div>
}
I'm using ant and ReactJs to work on a project and encounter a problem as follows: my datasource is an array of objects that contain some fields like id, photoUrl, name, phone and email. I use this datasource to create a table which has columns avatar, name, phone number, email, and action. Action is a link text edit and also has an onClick function, which is used to edit the information of a table row.
Now i want to pass the id of the data in each row to the parameter of the edit onClick function. What I have tried so far is set the dataIndex of column Action to "id" and pass the id as a parameter to the onClick function like the code below, but it just hang up the screen.
{
title: 'Action',
dataIndex: 'id',
key: 'id',
render: (id) => (
<span>
<a href="javascript:;" onClick={this.handleEditBtnClick(id)}>
Edit
</a>
</span>
),
},
This is an example of my data object
{
"id": 21,
"photoUrl": "https://dummyimage.com/600x400/d11b1b/ffffff&text=patient+21",
"displayName": "patient 21",
"phone": "0901993159",
"email": "pp21#yopmail.com"
},
Thank you for your time.
The way you are binding the handleEditBtnClick function to you onClick is wrong
It should be: onClick={() => {this.handleEditBtnClick(id)}}
The current implementation is trigerring the handleEditBtnClick function call on each render instead of binding the function with onClick. And you the render goes into infinite loop and your screen hangs.
{
title: 'Action',
dataIndex: 'id',
key: 'id',
render: (id) => (
<span>
<a href="javascript:;" onClick={() => {this.handleEditBtnClick(id)}}>
Edit
</a>
</span>
),
},
You can also refer to this solution which further explains this problem
Hope it helps. Revert for any confusions.
Change this:
<a href="javascript:;" onClick={this.handleEditBtnClick(id)}>
Edit
</a>
To:
<a href="javascript:;" onClick={() => this.handleEditBtnClick(id)}>
Edit
</a>
If you just want to edit the row you can also manage it with state like this:
{
title: 'Action',
dataIndex: 'id',
key: 'id',
render: (id) => (
<span>
<a href="javascript:;" onClick={() => {this.setState({selected: id})}}>
Edit
</a>
</span>
),
},
I am trying to add an external div element(Summary Panel) on the right side of the bar chart I have implemented using react-plotly.js.
The div element would pop-up next to the chart when onClick event is fired on the chart. The panel would display the information related to the bar that was clicked. The data object based on which the bar chart is created is:
const barData = [
{ endTime: '', startTime: '', duration: 6, initiatorUsername: 'abc', title: 'abc1', aTitle: 'Manager', outcome: 'Success' },
{ endTime: '1521203405', startTime: '1520389805', duration: 7, initiatorUsername: 'defs', title: 'Senior Analyst', aTitle: 'Manager', outcome: 'Failure' }
];
I haven't seen any such example or any documentation related to add external div element to the chart. Is it possible to link chart to the external div element ?
I did attempt to implement it by doing the following:
<Plot
data={this.prepData(timelineData)}
onClick={(data) => {
this.renderCustomPanel(data);
}
onHover={(hover) => this.getHoverInfo(hover)}
type={'bar'}
layout={layout}
style={{ width: '95%' }}
/>
renderCustomPanel(e) {
const panelInfo = timelineData.map(i => `<span className="panel-info">
<span className="tooltip-value" style='font-size:15px;display:block'>${i.duration} days <br> Start time: ${moment.unix(i.startTime).format('MMM-DD-YYYY h:mm:ss')} <br> End time:${moment.unix(i.endTime).format('MMM-DD-YYYY h:mm:ss')}</span></span>`);
return panelInfo;
}
The onClick function does call the function but doesn't display the div element. I did try applying css styles to the element but nothing works. Firstly, how do I make a panel display onClick?
Alternate solution that comes to my mind is to make panel a separate sibling component. In that case, How do I pass the data to it such that in the description section it displays the information related to the bar that was clicked ?
class SummaryPanel extends Component {
constructor(props) {
super(props);
this.state = {
isActive: true
};
}
render() {
return (
<div className='summaryPanel'>
<Card
label='Summary panel'
heading=''
description=''
/>
<button type="button" className="close" data-dismiss="alert" aria-label="Close" onClick={() => this.hideAlert()}><span aria-hidden="true">×</span></button>
</div>
);
}
}