Is there a way to open a details dialog when clicking on a specific row of the table. The issue is regarding material-table (https://material-table.com/).
Thanks in advance! :)
There isn't a native solution to display a popup like you want with material-table. But you can achieve this.
You have a props in MaterialTable called onRowClick.
<MaterialTable
onRowClick={(evt, selectedRow) => yourFunction(selectedRow)}
/>
Using this props you can define your own function to open a popper (https://material-ui.com/components/popper/) or whatever popup type component you want on row click and display the informations of the selected Table row in it.
That way you can even make a request to get more details info with the id you get to display even more details info !
Exemple:
const alertMyRow = (selectedRow) => (
// here i can request something on my api with selectedRow.id to get additional
// datas which weren't displayed in the table
alert(`name: ${selectedRow.name}, surname: ${selectedRow.surname}`);
);
return(){
render(
<MaterialTable
columns={[
{ title: 'ID', field:'id' },
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' },
{ title: 'Phone Number', field: 'phone' },
]}
datas={[...]}
onRowClick={(evt, selectedRow) => alertMyRow(selectedRow)}
/>
)
);
Don't hesitate if i wasn't clear enough ;)
Related
I have an API which has a bunch of data in it. I should be able to click the first column with the header "Symbol" which then goes to a completely new, updated table. This is how it looks before the cell click. This is what happens though after I click a cell. The page goes blank even though the URL has updated based on my code. What I want to happen is after the cell click, the table updates with new column headers and row values, based on the "symbol" I clicked, with data filling the table from the API.
When I click on a cell, it goes to a brand new page based on that cell (so like /history/A), but how am I supposed to create a .js file for 500 different cell values?
I am using a useTable hook with react-table-v7, and I have a separate Table.js file for the layout.
function Stocks() {
const [data, setData] = useState([]);
useEffect(() => {
axios(`http://localhost:3000/all`)
.then((res) => {
setData(res.data);
})
.catch((err) => console.log(err))
}, []);
const columns = useMemo(
() => [
{
Header: "Stock search",
columns: [
{
Header: "Symbol",
accessor: "symbol",
Cell: ({ row }) => (<Link to={{ pathname: `/history/${row.original.symbol} `}}>{row.original.symbol}</Link>)
},
{
Header: "Name",
accessor: "name",
},
{
Header: "Industry",
accessor: "industry",
},
],
},
],
[]
)
return (
<div className="Stocks">
<Table
columns={columns}
data={data}
/>
</div>
);
}
I have no errors, warnings or issues on my dev tools either.
useEffect(() => {
axios("http://localhost:8080/all")
.then((res) => {
setData(res.data);
})
.catch((err) => console.log(err))
}, []);
For one of my column headers I have:
const columns = useMemo(
() => [
{
Header: "Stock search",
columns: [
{
Header: "Symbol",
accessor: "symbol",
Cell: (props) => (
<a href={`/code/${props.value}`}>{props.value}</a>
),
},
And just a table that uses the useTable hook with React-Table-v7 (not tanstack) that returns this:
return (
<div className="Stocks">
<Table columns={columns} data={data} />
</div>
);
All I'm trying to do is: when the user clicks on any "symbol" value in the table, it updates the table and new columns appear, with data based on that symbol that was clicked which I already have in my external API link above. So the default columns are: "Symbol | Name | Field", and if you click on any symbol, it updates the table with relevant data and only the columns "Date | Volumes | Type" appear. I have tried so many variations like ag-grid, material-table, even using html only but I don't know what else to do here.
For example:
refer this sample data grid.
I inserted Like this.
But was not able to make a link.
Welcome to Stackoverflow #TangoCharlie
You need to use renderCell and not render:
{
field: "age",
headerName: "Age",
type: "number",
width: 110,
renderCell: (rowData) => (
<Link href={`/user?id=${rowData.id}`} target="_blank">
{rowData.row.age}
</Link>
)
}
Sandbox: https://codesandbox.io/s/datagriddemo-material-demo-forked-93d5nc?file=/demo.js
just return the string like this way...
`${params.getValue("id")}`
I have source code below: (version antd: "^4.2.4")
column:
const columns = [
{
title: 'ID',
dataIndex: 'id',
sorter: true,
width: 100,
},
...
Table:
<Table rowSelection={rowSelection}
onChange={onChangeTable}
className='table'
size='small'
loading={schedules.loading}
pagination={{
...PAGINATION,
current: schedules.param.current,
pageSize: schedules.param.pageSize,
total: schedules.param.total,
}}
rowKey='id'
columns={columns}
dataSource={schedules.listData}
/>
call onChange:
const onChangeTable = (pagination, sorter) => {
console.log(sorter)
}
console.log(sorter) is empty when I click sort at column id.
Can you help me? Thanks you very much!
The documentation for onChange on the Table component shows the following signature:
function(
pagination,
filters,
sorter,
extra: { currentDataSource: [], action: paginate | sort | filter }
)
So you need to change the callback to:
const onChangeTable = (pagination, filters, sorter) => {
console.log(sorter)
}
I want to add multi language option in mui Datatables. I can change the translations but when I want to change language, I tried to give another object with the other translations (this object if I do console log I can see the changes) but the label texts not change.
I used a contextProvider to change the language selected and then get the specific dictionary with the translations.
Is a class component, so I did a static contextType with the correct provider.
Is there any possibility to re-render the element with another options or something like that?
options = {
textLabels: this.context.translation.dataTables.textLabels
};
return(
<MUIDataTable
title={this.context.language.value}
data={data}
columns={columns}
options={options}
/>
);
The best approach to re-render Mui-Datatables its updating the key of the table
key={this.context.language.value}
<MUIDataTable
key={this.context.language.value}
title={this.context.language.value}
data={data}
columns={columns}
options={options}
/>
You can force React component rendering:
There are multiple ways to force a React component rendering but they are essentially the same. The first is using this.forceUpdate(), which skips shouldComponentUpdate:
someMethod() {
// Force rendering without state change...
this.forceUpdate();
}
Assuming your component has a state, you could also call the following:
someMethod() {
// Force rendering with a simulated state change
this.setState({ state: this.state });
}
use customRowRender Function in the options and manipulate table with respect to language
Override default row rendering with custom function.
customRowRender(data, dataIndex, rowIndex) => React Component
In MUIDataTable, We can override label name by providing label in MUIDataTableColumnDef options while making column.
Example :
const columns: MUIDataTableColumnDef[] = [
{
name: 'Id',
label: 'ID',
options: {
download: false,
customBodyRenderLite: (index: number) => {
const desc: Description = evenMoreAbout[index]
return <BasicInfo obj={desc} setIconClicked={setIconClicked} />
}
}
},
{
name: 'id',
label: 'ID',
options: {
display: 'excluded',
download: true,
customBodyRender: desc => desc.id
}
}]
Even though if we still want to over ride the label name on some condition of data using customHeadLabelRender ... we can as like below example
const columns: MUIDataTableColumnDef[] = [
{
name: 'Id',
label: '',
options: {
download: false,
customBodyRenderLite: (index: number) => {
const desc: Description = evenMoreAbout[index]
return <BasicInfo obj={desc} setIconClicked={setIconClicked} />
},
customHeadLabelRender: (dataIndex: number, rowIndex: number) => {
return 'ID';
}
}
}
]