React - Insert material-table Actions in the First and Last Column - reactjs

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).

Related

Material table onBulkUpdate click don't change icons

I'm using "material-table": "^2.0.3" version. I want to editable all my data and I used onBulkUpdate option in material table document. but after I click the icon next to the search form change to editable but icon doesn't change at all and to give me submit or reject actions to call any function and save my changes.
here is my code:
const [columns, setColumns] = useState([
{ title: 'Name', field: 'name' },
{
title: 'Surname',
field: 'surname',
},
{ title: 'Birth Year', field: 'birthYear' },
{
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 (
<div className={styles.container}>
<MaterialTable
title='Bulk Edit Preview'
columns={columns}
data={data}
editable={{
onBulkUpdate: (changes) =>
new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 1000);
}),
}}
/>
</div>
);
I solved my problem by change my package version.
in package.json
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"material-table": "^1.69.3"

How to auto fill in react material table

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

React MaterialTable clear all filters action - column and global filter

I am absolutely new to react.
It may trivial but I can't figure how to implement action that will clear all table filters.
In my table, I use date filter, drop-down, text, and global filters looking for one-click clear all filters
https://codesandbox.io/s/eager-thunder-ejlg5?file=/src/index.js
<MaterialTable
title="Free 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" }
}
]}
data={[
{ name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
{
name: "Zerya Betül",
surname: "Baran",
birthYear: 2017,
birthCity: 34
}
]}
actions={[
{
icon: () => <FilterNoneIcon />,
tooltip: "clear all filters",
isFreeAction: true,
onClick: (event) => alert("clear all filters logic")
}
]}
options={{
filtering: true,
sorting: true
}}
/>
As of this writing, it does not look like they have a clear filter functionality - according to this issue at least: https://github.com/mbrn/material-table/issues/1132 since they tagged it as wontfix - meaning they are not planning to work on it. However, on the same issue, 1 of the users recommended using a ref and manually accessing the table to filter the data (although that user later advised against it) - so you can try that as well.
Another way you could do this is to just remount the component. Since the component is remounted, it will begin at its initial state including unfiltered data
function App() {
const [muiTableKey, setMuiTableKey] = React.useState(0);
return (
<MaterialTable
key={muiTableKey}
actions={[
{
icon: () => <FilterNoneIcon />,
tooltip: "clear all filters",
isFreeAction: true,
onClick: (event) => {
setMuiTableKey(muiTableKey + 1); // set new key causing remount
}
}
]}

Value is not updating in MaterialTable

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);
});
}
}}
/>
)
}

How might I uncheck all rows of MaterialTable(mbrn/material-table) with a button?

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.

Resources