I have two issues in MaterialTable
* I am using MaterialTable in reactjs , i want to do onClick on particular row . I am passing JSON data in table. How can i implement this?
columns: [
{ title: 'Username', field: 'username' },
{ title: 'Team Membership', field: 'teammembership' },
],
<MaterialTable
title = "Team Members"
columns={this.state.columns}
data={this.state.rowData}
/>
teammembership should be clickable
*How to add a button in particular row, rather than action? I am already using action in first row , i want to add one button not along with action, but in 3rd row.
columns: [
{ title: 'User Name', field: 'username' },
{ title: 'Role',
field: 'roles',
lookup: { 34: 'Primary', 63: 'Secondary' ,53 : 'Escallation', 54:'Override ' },
},
{ title: 'Start Date', field: 'Startdate', type: 'datetime' },
{ title: 'End Date', field: 'enddate', type: 'datetime' },
{title : 'Repeat', field:'repeat'},
],
data: [
{ username: 'Mehmet', roles: '34', Startdate: 1987, enddate: 2018,repeat:'repeat' },
{
username: 'Zerya Betül',
roles: '63',
Startdate: 2017,
enddate: 2019,
repeat:'repeat'
},
],
<MaterialTable
title = ""
columns={this.state.columns}
data={ this.state.data}
editable={{
onRowAdd: newData =>
new Promise(resolve => {
setTimeout(() => {
resolve();
const data = [...this.state.data];
data.push(newData);
setState({ ...this.state, data });
}, 600);
}),
onRowUpdate: (newData, oldData) =>
new Promise(resolve => {
setTimeout(() => {
resolve();
const data = [...this.state.data];
data[data.indexOf(oldData)] = newData;
setState({ ...this.state, data });
}, 600);
}),
onRowDelete: oldData =>
new Promise(resolve => {
setTimeout(() => {
resolve();
const data = [...this.state.data];
data.splice(data.indexOf(oldData), 1);
setState({ ...this.state, data });
}, 600);
}),
}}
/>
in the place of repeat i want to place a button
Any help would be appreciated. Thank you.
The component has an onRowClick prop which can be used to have things happen onClick of a given row. Please see the documentation here and look specifically at the section "Detail Panel With RowClick Example".
Related
when i use editable attribute in schema
editable: (row, rowData) => {
return rowData.town === "scaraborough";
},
it works fine but when i use celEdit editable property of field just working with boolean
const tableRef = React.useRef();
const [columns, setColumns] = useState<Column<schema>[]>([
{
title: "Name",
field: "name",
editable: "always",
type: "string",
resizable: true,
emptyValue: <div style={{ visibility: "hidden" }}>empty</div>,
},
{
title: "Town",
field: "town",
editable: (row, rowData) => {
return rowData.town === "scaraborough";
},
type: "string",
},
{
title: "Digits",
field: "digits",
type: "numeric",
lookup: { 63: "212", 212: "1212" },
},
{ title: "status", field: "status", editable: "always", type: "boolean" },
]);
const [data, setData] = useState<schema[]>([
{
name: "",
town: "sample input data",
digits: 63,
status: false,
},
{ name: "jimmy", town: "scaraborough", digits: 63, status: false },
{ name: "sdsdd", town: "china", digits: 212, status: false },
]);
const options = { filtering: true, selection: true };
return (
<MaterialTable
tableRef={tableRef}
columns={columns}
data={data}
options={options}
// editable={{
// onRowUpdate: (newData, oldData) =>
// new Promise((resolve, reject) => {
// const dataUpdate = [...data];
// resolve(data);
// }),
// }}
cellEditable={{
onCellEditApproved: (newValue, oldValue, rowData: any, columnDef) => {
return new Promise((resolve, reject) => {
resolve();
});
},
}}
/>
);
"material-table": "^1.69.3",
This is the code for the material ui in react typescript. I am trying to add a button at the bottom which when clicked leads to a form, but after trying many things, I still dont know how to do that?
I just need a simple button at the bottom, any help is appreciated
This is the code from the website
import React from 'react';
import MaterialTable, { Column } from 'material-table';
interface Row {
name: string;
surname: string;
birthYear: number;
birthCity: number;
}
interface TableState {
columns: Array<Column<Row>>;
data: Row[];
}
export default function MaterialTableDemo() {
const [state, setState] = React.useState<TableState>({
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,
},
],
});
return (
<MaterialTable
title="Editable Example"
columns={state.columns}
data={state.data}
editable={{
onRowAdd: (newData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
setState((prevState) => {
const data = [...prevState.data];
data.push(newData);
return { ...prevState, data };
});
}, 600);
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
if (oldData) {
setState((prevState) => {
const data = [...prevState.data];
data[data.indexOf(oldData)] = newData;
return { ...prevState, data };
});
}
}, 600);
}),
onRowDelete: (oldData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
setState((prevState) => {
const data = [...prevState.data];
data.splice(data.indexOf(oldData), 1);
return { ...prevState, data };
});
}, 600);
}),
}}
/>
);
}
This is what i want the button to look like:
You can have a component that returns both your MaterialTableDemo and the button.
You can wrap both of them in a div, or use the React.Fragment to inline them.
function TableWithButton() {
return (
<>
<MaterialTableDemo />
<div style={{ width: '100%', textAlign: 'center'}}>
<Button onClick={navigateToForm}>Button</Button>
</div>
</>
);
}
Here is an example
Is it possible to make the table title, search field, global actions icons and column headers in the Material-Table sticky?
I've tried adding headerStyle to options and that has no effect (anyway that would only affect column headers and not the table title etc)
options={{
headerStyle: { position: 'sticky'},
paging: false,
search: false,
}}
Has anyone got any ideas how to do it?
I was hoping a 'sticky header' option existed but if it does I cannot see it!
I would have thought a sticky header is a fairly common use case for tables.
This is the basic code to use a Material Table:
import React from 'react';
import MaterialTable from 'material-table';
export default function MaterialTableDemo() {
const [state, setState] = React.useState({
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,
},
],
});
return (
<MaterialTable
title="Editable Example"
columns={state.columns}
data={state.data}
editable={{
onRowAdd: (newData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
setState((prevState) => {
const data = [...prevState.data];
data.push(newData);
return { ...prevState, data };
});
}, 600);
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
if (oldData) {
setState((prevState) => {
const data = [...prevState.data];
data[data.indexOf(oldData)] = newData;
return { ...prevState, data };
});
}
}, 600);
}),
onRowDelete: (oldData) =>
new Promise((resolve) => {
setTimeout(() => {
resolve();
setState((prevState) => {
const data = [...prevState.data];
data.splice(data.indexOf(oldData), 1);
return { ...prevState, data };
});
}, 600);
}),
}}
/>
);
}
`
I figured it out in the end:
I had to add the these to the Material Table options. It means knowing in advance the height that you want your table to be. I
options={{
headerStyle: { position: 'sticky', top: 0 },
maxBodyHeight: 500,
}}
and then also this was necessary to add to the Material Table depending on pagination setting:
components={{
Container: props => (
<div style={{height: 500}}>
{props.children}
</div>
),
}}
I Have Fetched Some Data from a url via axios .I want to display those data to material ui table data in React. Here, 'patient' is the array where fetched data stored.
Code:
const [patient, setPatient] = React.useState([])
const [state, setState] = React.useState({
columns: [
{ title: 'Name', field: 'name' },
{ title: 'Gender', field: 'gender' },
{ title: 'Age', field: 'age', type : 'numeric' },
{ title: 'Birth Year', field: 'birthYear', type : 'numeric' },
{ title: 'Phone Number', field: 'phoneNumber', type : 'tele'
},
],
data: [
],
});
React.useEffect(()=>{
axios.get('http://127.0.0.1:8000/patient/AppModel/')
.then(res =>{
setPatient(res.data)
})
.catch(err=>{
console.log(err)
})
},[])
return (
<MaterialTable
title="Patient List"
columns={state.columns}
data={state.data}
/>
})}
But actually i don't how to get an array data to an array of objects.
I would like to add a key listener with 'enter' key to "onRowAdd" action from material-table on react,
Could be able to call the function outside the table props and add a normal js listener to key enter for launch the function?
So i searched on the doc of material-table and nothing similar can help me, anyone have some idea how i can fix it?
thanks
import React, { useEffect, useState } from 'react'
import MaterialTable from 'material-table'
import axios from 'axios'
var emitter = require('../config/global_emitter')
export default function MaterialTableDemo(props) {
const [state, setState] = useState({
columns: [
{ title: 'Item', field: 'item' },
{ title: 'Quantity', field: 'quantity', type: 'numeric' },
{ title: 'Description', field: 'description' },
{ title: 'Price', field: 'price', type: 'numeric' },
{
title: 'Location',
field: 'location',
lookup: { 34: 'Batman', 63: 'Back Store' },
},
],
data: []
});
useEffect(() => {
setState({...state, data:[]})
const user = {
name: props.userSelected
}
axios.post('api', user)
.then(e => {
if (e.data !== ''){
setState({...state, data: e.data})
}
})
},[props.userSelected])
const handleUpdate = (data) => {
const upload = {
items: data,
name: props.userSelected
}
axios.post('api', upload)
.then((e) => {
if (e.status === 200){
emitter.emit('confirmMessage', 'Updated list correctly')
}
})
}
return (
<MaterialTable
title={props.userSelected + '´s items ordered'}
columns={state.columns}
data={state.data}
options={{
headerStyle: {
backgroundColor: '#01579b',
color: '#FFF'
},
rowStyle: {
opacity: 1,
animationName: 'fadeInOpacity',
animationIterationCount: 1,
animationTimingFunction: 'ease-in',
animationDuration: '2s'
}
}}
onKeyDown={(ev) => {
console.log(`Pressed keyCode ${ev.key}`);
if (ev.key === 'Enter') {
// Do code here
ev.preventDefault();
}
}}
editable={{
onRowAdd: newData =>
new Promise(resolve => {
setTimeout(() => {
resolve();
addRow(newData)
}, 600);
}),
onRowUpdate: (newData, oldData) =>
new Promise(resolve => {
setTimeout(() => {
resolve();
const data = [...state.data];
data[data.indexOf(oldData)] = newData;
handleUpdate(data)
setState({ ...state, data });
}, 600);
}),
onRowDelete: oldData =>
new Promise(resolve => {
setTimeout(() => {
resolve();
const data = [...state.data];
data.splice(data.indexOf(oldData), 1);
handleUpdate(data)
setState({ ...state, data });
}, 600);
}),
}}
/>
);
}