I would like to style on row based on a certain props of one row, here is the code :
<MaterialTable
className="ciao"
title="One Detail Panel Preview"
columns={[
{title: "Icon", field: "icon"},
{ title: 'ID', field: 'id' },
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' },
{ title: 'Value', field: 'birthYear', type: 'numeric' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa', 45: "Genova" },
},
]}
data={[
{ icon: <AccessAlarmIcon />,id:0, name: 'Andrea', surname: 'Castello', birthYear: 1987, birthCity: 63 },
{ id:1,name: 'Francesco', surname: 'Giostra', birthYear: 1987, birthCity: 63 },
{ id:2,name: 'Pietro', surname: 'Casa', birthYear: 1987, birthCity: 63 },
{ id:3,name: 'Giulio', surname: 'Villa', birthYear: 1987, birthCity: 34 },
{ id:4,name: 'Paolo', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ id:5,name: 'Mehmet', surname: 'Tazza', birthYear: 1987, birthCity: 45 },
]}
detailPanel={rowData => {
return (
<div>Ehi ciao</div>
)
}}
options={{
actionsColumnIndex: -1,
selection: true,
sorting: true,
rowStyle: {
background: 'linear-gradient(to right, #fdf32e 0%, #ffffff 2%)',
}
}}
onSelectionChange={(rows) => alert('You selected ' + rows.length + ' rows')}
/>
For example if the name is Pietro I want the background red.
Thanks for the help :D
options={{rowStyle: (rowData) => {
if(rowData.name === "Pietro") {
return {
backgroundColor: "red"
}
} else {
return {};
}
}}}
Old question but using the above would do it.
Related
I need to filter each column with query strings in the material table, could anyone please tell me how do I need to approach for that, here is the sample material table with filtering,
function BasicFiltering() {
return (
<MaterialTable
title="Basic Filtering Preview"
columns={[
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
},
]}
data={[
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
]}
options={{
filtering: true
}}
/>
)
}
Here is a sample URL with query strings,
http://example.com/path?name=Mehmeth&surname=Baran&birthYear=1987&birthCity=63
Can someone please help how to filter each column query strings. It would be much helpful.
Each column getting filtered using query strings.
I am trying to do something like auto fill rowData.properties on material table. But props.value always is undefined. Thisis my code
<MaterialTable
title="Simple Action Preview"
columns={[
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric'},
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
},
{
title: 'Full name',
field: 'fullName',
editComponent: (props)=>{
return <div onClick={()=> handleClick(props) > // props.value at here always null
<TextField
value={`${props.rowData.name} ${props.rowData.surname}` // fullname with edit component auto fill here
onChange={(e)=>props.onChange(e.target.value)}
/>
</div>
},
}
]}
data={[
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 , fullName: 'Mehmet Baran'},
{ name: 'Zerya', surname: 'Baran', birthYear: 2017, birthCity: 34 , fullName: 'Zerya Baran'},
]}
actions={[
{
icon: 'save',
tooltip: 'Save User',
onClick: (event, rowData) => alert("You saved " + rowData.name)
}
]}
/>
How to auto fill rowData.fieldName in material table? With fullName is example.
Please help me resolve it
Is it possible within material-table to insert two separate actions in the first and last columns respectively? I know that there is an actionsColumnIndex prop that can be used as such options={{actionsColumnIndex: -1}}, but I believe this will add all the actions to the end of the table.
I can't seem to find anything in the documentation that specifies how to add actions and specify their individual actionsColumnIndex for each, rather than for all the actions (if this is possible).
I think there is not such a feature, but you can use custom column and create your own action columns.
Something like this:
import React from "react";
import MaterialTable from "material-table";
import { Save, Delete } from "#material-ui/icons";
import IconButton from "#material-ui/core/IconButton";
export default function FreeAction() {
return (
<MaterialTable
title="Dynamic Actions"
columns={[
{
title: "First Action",
render: (rowData) => {
const button = (
<IconButton
color="inherit"
onClick={() => {
console.log("Save");
}}
>
<Save />
</IconButton>
);
return button;
}
},
{ title: "Name", field: "name" },
{ title: "Surname", field: "surname" },
{ title: "Birth Year", field: "birthYear", type: "numeric" },
{
title: "Birth Place",
field: "birthCity",
lookup: { 34: "London", 63: "Berlin" }
},
{
title: "Second Action",
render: (rowData) => {
const button = (
<IconButton
color="inherit"
onClick={() => {
console.log("Save");
}}
>
<Delete />
</IconButton>
);
return button;
}
}
]}
data={[
{
name: "Jonathan",
surname: "Livingston",
birthYear: 1987,
birthCity: 63
},
{ name: "Richard", surname: "Bach", birthYear: 2017, birthCity: 34 },
{ name: "Michael", surname: "Scott", birthYear: 2020, birthCity: 34 },
{ name: "Kevin", surname: "Malone", birthYear: 2020, birthCity: 34 }
]}
/>
);
}
Have a look at the code to add missing features (tooltip for example).
I try to edit the value and update the same but its not updating in MaterialTable
Below is the link which am refering
https://material-table.com/#/docs/features/editable
under this am refering Cell Editable Example
what am missing here
any suggestion?
please refer below snippet
import React from "react";
import MaterialTable from "material-table";
export default function CellEditable() {
const { useState } = React;
const [columns, setColumns] = useState([
{ title: "Name", field: "name" },
{
title: "Surname",
field: "surname",
initialEditValue: "initial edit value"
},
{ title: "Birth Year", field: "birthYear", type: "numeric" },
{
title: "Birth Place",
field: "birthCity",
lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
}
]);
const [data, setData] = useState([
{ name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
{ name: "Zerya Betül", surname: "Baran", birthYear: 2017, birthCity: 34 }
]);
return (
<MaterialTable
title="Cell Editable Preview"
columns={columns}
data={data}
cellEditable={{
onCellEditApproved: (newValue, oldValue, rowData, columnDef) => {
return new Promise((resolve, reject) => {
console.log("newValue: " + newValue);
setTimeout(resolve, 1000);
});
}
}}
/>
);
}
The code you are using never sets the state, it just logs to the console.
You need to set the state at some point. I was able to get this working, though I am uncertain if this is the correct approach.
Update
If you wish to disable a specific column you can add editable: 'never' to the specific column. See below where I added this to the birthYear.
function CellEditable() {
const { useState } = React;
const [columns, setColumns] = useState([
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname', initialEditValue: 'initial edit value' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric', editable: 'never' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
},
]);
const [data, setData] = useState([
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
]);
return (
<MaterialTable
title="Cell Editable Preview"
columns={columns}
data={data}
cellEditable={{
onCellEditApproved: (newValue, oldValue, rowData, columnDef) => {
return new Promise((resolve, reject) => {
const clonedData = [ ...data ]
clonedData[rowData.tableData.id][columnDef.field] = newValue
setData(clonedData)
setTimeout(resolve, 1000);
});
}
}}
/>
)
}
I am building a reactjs web app where I use mbrn/material-table(
https://github.com/mbrn/material-table) .The table has a functionality to check all rows in a field at once.But to unselect(or uncheck) all rows ,you need to click on the select all checkbox and then click on it again to uncheck all rows.I have read the documentation of the framework but have not been able to find a functionality implement unchecking all rows at once with a button.
import MaterialTable from "material-table";
const table = () => {
return (
<MaterialTable
columns={[
{ title: "ID" },
{ title: "name" },
{ title: "SurName" },
{
title: "Birthyear"
},
{ title: "BirthCity" },
{
title: "Sex"
},
{
title: "Type"
}
]}
data={[
{
id: 1,
name: "a",
surname: "Baran",
birthYear: 1987,
birthCity: 63,
sex: "Male",
type: "adult"
},
{
id: 2,
name: "b",
surname: "Baran",
birthYear: 1987,
birthCity: 34,
sex: "Female",
type: "adult",
parentId: 1
},
{
id: 3,
name: "c",
surname: "Baran",
birthYear: 1987,
birthCity: 34,
sex: "Female",
type: "child",
parentId: 1
},
{
id: 4,
name: "d",
surname: "Baran",
birthYear: 1987,
birthCity: 34,
sex: "Female",
type: "child",
parentId: 3
},
{
id: 5,
name: "e",
surname: "Baran",
birthYear: 1987,
birthCity: 34,
sex: "Female",
type: "child"
},
{
id: 6,
name: "f",
surname: "Baran",
birthYear: 1987,
birthCity: 34,
sex: "Female",
type: "child",
parentId: 5
}
]}
actions={[
{
tooltip: "Remove All Selected Users",
icon: icons,
onClick: (evt, data) =>
alert("You want to delete " + data.length + " rows")
}
]}
// onSelectionChange={rows =>
// // alert("You selected " + rows.length + " rows")
// }
options={{
selection: true
}}
parentChildData={(row, rows) => rows.find(a => a.id ===
row.parentId)}
title="Search Results"
/>);
I want that on click of a button,all selected rows should get unselected
Since material table actually mutates your data, you can just use something like this:
this.state.data.forEach(d => {if(d.tableData)d.tableData.checked = false});
and set that as the new state. That is not the prettiest, because of the state mutation, but it is the only way, since material table itself mutates it.
You can use onAllSelected function from the tableRef like that
import MaterialTable from "material-table";
import { useRef } from 'react';
const Table = () => {
const tableRef = useRef()
return (
<>
<button onClick={
() => {tableRef.current?.onAllSelected(false)}}>
clear selection
</button>
<MaterialTable {...all props you need} tableRef={tableRef} />
</>
);
The issue was raised here.