This question is duplicated.
But the old one is not answered
I need to use React Router inside Cellrenderer method with Ag-grid.
Example
cellRenderer: function (params) {
return '<Link to="/customer/view/'+params.value+'">'+params.value+'</Link>'
}
I tried to use reactNext=true in the ag-grid props but no hope
You should use frameworkComponents instead.
Cell Renderer
const LinkCellRenderer = (params) => (
<Link to={"/edit/" + params.data.id}>Edit</Link>
);
Column Definitions
{
headerName: "Action",
field: "action",
cellRenderer: "LinkCellRenderer"
}
Component
<AgGridReact
{...}
frameworkComponents={{
LinkCellRenderer
}}
/>
Live Demo
Related
I'm using the AntD tree and I have a react element that I want to pass as either an icon or a title because it has custom styling. Due to it being IP I can't share too much code, but my question is:
how can I pass a react element (see below i.e. generic name) as either a title or icon and have antD tree render it?
i.e. this is what I want to pass as a prop to the icon or title
import React from 'react';
const genericName = (props) => {
// code uses props to get some infor for Color
// cant share code due to proprietary reasons
// but it is not needed for this question
const colorHTML = getColor(Color);
return (
<div>
<div className={`colors from`}>${colorHTML}</div>
{pin}
</div>
);
};
export default genericName;
in my console you can see node.icon is a typeof react.element. I want to target that and just pass the prop into antD tree as either title or icon
i.e.
return (
<Tree
icon={node.icon}
/>
)
I've searched and similar answers were given before antD forbid the use of children and strictly allows treeData. All examples I see only use strings in titles/icons, but since antD documentation is very limited, I need to know if my use case is possible. Right now, for the life of me I can't understand why it doesn't populate.
Thank you in advance.
It should definitely work to put a JSX component as title within treeData. Take a look at this snippet, I added a Icon here in one of the titles:
import React from 'react'
import { RightCircleOutlined } from '#ant-design/icons'
type Props = {}
import { Tree } from 'antd';
import type { DataNode, TreeProps } from 'antd/es/tree';
const treeData: DataNode[] = [
{
title: <span>{<RightCircleOutlined />} parent</span>, //icon added here
key: '0-0',
children: [
{
title: 'parent 1-0',
key: '0-0-0',
disabled: true,
children: [
{
title: 'leaf',
key: '0-0-0-0',
disableCheckbox: true,
},
{
title: 'leaf',
key: '0-0-0-1',
},
],
},
{
title: 'parent 1-1',
key: '0-0-1',
children: [{ title: <span style={{ color: '#1890ff' }}>sss</span>, key: '0-0-1-0' }],
},
],
},
];
const Demo: React.FC = () => {
const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
console.log('selected', selectedKeys, info);
};
const onCheck: TreeProps['onCheck'] = (checkedKeys, info) => {
console.log('onCheck', checkedKeys, info);
};
return (
<Tree
checkable
defaultExpandedKeys={['0-0-0', '0-0-1']}
defaultSelectedKeys={['0-0-0', '0-0-1']}
defaultCheckedKeys={['0-0-0', '0-0-1']}
onSelect={onSelect}
onCheck={onCheck}
treeData={treeData}
/>
);
};
export default Demo;
I have created a custom table component I forked from ant design. I reuse it in all my components, It takes an array of all columns and renders it. I pass columns as a prop called initialColumns.
My issue is whenever the user changes the language, the table contents is re rendering but not the columns which I passed, they don't get translated, How would I force a rerender when the language is changed.
custom table component
const TableComponent = (props) => {
const { initialColumns, dataSource, handleClick } = props
return ( <Table
columns={colmenu.visibleColumns}
dataSource={dataSource}
size="small"
pagination={{
pageSizeOptions: ['10', '20', '50'],
showSizeChanger: true,
}}
/>)
}
Parent component, here I call my TableComponent as pass it columns
It looks something like this:
const columns = [
{
title: t.status,
dataIndex: 'status',
key: 'status',
sorter: (a, b) => a.status.localeCompare(b.status),
...GetColumnSearchProps(['status']),
className: 'text-center',
checked: true,
},
.
.
.
.
here is how I get the translated files
const { messages: t } = useIntl()
and this is the render method:
<TableComponent
initialColumns={columns}
dataSource={data}
handleClick={addModal}
title="AABC"
/>
So how would I update the initialColumns prop when the language is changed?
I have this React component
import React from "react";
import "./search.css";
// Table package
import MaterialTable from 'material-table';
function BasicSearch(props) {
return (
<div className="hovered-styled-row">
<MaterialTable
title="Students"
columns={[
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' }
]}
data={props.data}
options={{
search: true
}}
actions={[
{
icon: "add",
tooltip: 'Save User',
onClick: (event, rowData) => {
// console.log(rowData);
}
}
]}
/>
</div>
)
}
export default BasicSearch;
I am using Material Design for this component. I need to export a rowData variable which is inside
actions inside onClick.
Then the container which imports this function should be able to use this data inside a container itself. when the rowData changes the data inside a container should also change. i mean the rowData has to be
in the form of a useState function
The approach you are taking is wrong. The below are the ways to pass data from one component to another depending on your design structure.
Pass data as props and use events to communicate data changes back to parent.
If global data/or shared data use Context API.
Without full context of how the data is intend to be used and how the final jsx looks like, it's difficult to further update this answer.
Just started using react-table, trying to figure out how to conditionally render something based on the accessor value. I get back some data from an api call and use one of the values for the accessor.
{
Header: "Action",
id: "startTime",
accessor: "attributes.startTime"
}
So I have a column with header "Action", here I want to conditionally render a button if the accessor value attrbiutes.startTime === null or something along those lines.
Rendering of the UI occurs in a different file so I also need to access it there for handling button onClick
I have a codesandbox here with a working example.
You can use custom cell renderer
const columns = [
{
Header: "Action",
id: "startTime",
accessor: "attributes.startTime",
Cell: props => {
return props.value === null ? <button>Click Me </button> : props.value;
}
}
];
I am trying to use a custom component in a cell in ag-grid, if i use a standard html component it works but not if i try to use a custom react component
Below code does not works
TABLE_COLUMNS = [
{
headerName: '', field: 'remarks', cellRendererFramework: (params) => {
return <div>
<SpinningWheel height={100}/>
</div>
}
}]
But below code works fine
TABLE_COLUMNS = [
{
headerName: '', field: 'remarks', cellRendererFramework: (params) => {
return <div>
<button>push me</button>
</div>
}
}
Everything seems to be working fine for me. I have created a similar component wrapped inside a div in a plunker from one of their examples and it is working as expected. Look for the following in columnDefs in index.js file.
{
headerName: "Child/Parent",
field: "value",
cellRendererFramework: (params) => <div><SpinningWheel {...params} name="Spinning Wheel"/></div>,
colId: "params",
width: 180
}