i want to do this one(some actions for selected and some actions for each row). Help please, thanks!
I use material-table with ReactJS. Now I have actions on each row without selectable, if add selection prop these actions disappear. I don't know how to combine each row actions with multiple actions..
You can add the position: 'row' prop to actions. There are 4 options available for the position prop: auto', toolbar, toolbarOnSelect, row
This minimal code snippet should work
<MaterialTable
actions={[
{
icon: 'save',
tooltip: 'Save User',
position: 'row',
onClick: (event, rowData) => alert('You saved ' + rowData.name)
},
{
icon: 'delete',
tooltip: 'Delete User',
position: 'row',
onClick: (event, rowData) =>
alert('You want to delete ' + rowData.name)
}
]}
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={{
selection: true,
actionsColumnIndex: -1
}}
title="Positioning Actions Column Preview"
/>
Here's the exact place in the source where it is decided whether to show actions column when selection property is set to true:
if (this.props.actions && this.props.actions.filter(a => !a.isFreeAction && !this.props.options.selection).length > 0) {
// ...
}
Another such place is in renderActions method:
const actions = this.props.actions.filter(a => !a.isFreeAction && !this.props.options.selection);
So it either has to be a isFreeAction or selection should be set to false. The only way you can customize this at the moment is to override a Row component - basically copy/paste it, modify those conditions, import the result as a new component and supply it in components property of the material-table config as an override for Row.
CodeSandbox: https://codesandbox.io/s/jovial-architecture-ggnrl
Related
I'm currently learning ReactJs and using Ant Design as a UI library. I have some problems when I tried to use the Selection (Checkbox Table). At first, it's fine with some basic interaction, I can get the selectedRowKeys, the selectedRow data normally to interact with the database. But when I need the Table to check some rows according to the data, it got some problems. When I set the props selectedRowKeys with data, it selects the right checkbox I want but I can't uncheck or select another checkbox. It shows the error:
Uncaught TypeError: clone.push is not a function at arrAdd ...
Here's how I'm doing it:
import React, { useState } from 'react';
import { Table, Radio, Divider } from 'antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
render: (text) => <a>{text}</a>,
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Address',
dataIndex: 'address',
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Jack',
age: 20,
address: 'Somewhere else',
},
]; // rowSelection object indicates the need for row selection
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
getCheckboxProps: (record) => ({
name: record.name,
}),
};
const Demo = () => {
const dataKeys = "1,2"; //after handling data from server, I got a string like this which I can pass to Table
return (
<div>
<Table
rowSelection={{
selectedRowKeys: dataKeys,
type: selectionType,
...rowSelection,
}}
columns={columns}
dataSource={data}
/>
</div>
);
};
ReactDOM.render(<Demo />, mountNode);
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
I try to understand antd.
I have here from the documentation Table Example 3.
When the radio button is clicked, this state is set and the row is selected.
If i clicked a cell of a row, the row should also be selected and the ckeck state of the radio button should be set.
Does anyone have any idea how to do that?
import React from 'react';
import { Table } from 'antd';
import 'antd/dist/antd.css';
const columns = [
{
title: 'Name',
dataIndex: 'name',
render: (text: string) => <a>{text}</a>,
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Address',
dataIndex: 'address',
},
];
interface DataType {
key: React.Key;
name: string;
age: number;
address: string;
}
const data: DataType[] = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Disabled User',
age: 99,
address: 'Sidney No. 1 Lake Park',
},
];
// rowSelection object indicates the need for row selection
const rowSelection = {
onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
};
export default function TableDemo() {
return (
<React.Fragment>
<Table
rowSelection={{
type: 'radio',
...rowSelection,
}}
columns={columns}
dataSource={data}
/>
</React.Fragment>
);
}
Current v4 docs for table are pretty extensive. Buried in there is this.
"Rows can be selectable by making first column as a selectable column. You can use rowSelection.type to set selection type. Default is checkbox.
selection happens when clicking checkbox by default. You can see https://codesandbox.io/s/000vqw38rl if you need row-click selection behavior."
Seems like what you're looking for. Easy to miss, though.
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
}
}
]}
I'm using MaterialTable with REACT (Datatable for React based on Material-UI Table. material-table.com) more precisely the detailed-panel - material-table.com/#/docs/features/detail-panel
What do I need? user should open/close detailed panels and drag/drop items between them.
The problem: each time I React rendering the table all detailed panels are closes.
I'm seeking for a solution that will allow me to set a flag for each row that notes whether it's hidden or open. So while rendering .. React will not close all rows automatically.
I tried setting options and events on the table and panels - None were able to control the row toggling.
The code is very simple:
<MaterialTable
title = "Group Keywords Preview"
columns = {[
{ title : "Group", field : "group" },
{ title : "Weight", field : "weight" }
]}
options={{
selection: true
}}
data = { my data ...}
detailPanel = {[
{
tooltip : 'Show Group',
render : rowData => {
return <my react component .. />
}
}
]}
/>
Does material-table have any flag/method to toggle a row programmatically?
Can I do it in another way?
Thanks in advance.
class DetailPanelWithRowClick extends React.Component {
constructor(props) {
super(props);
this.tableRef = React.createRef();
}
render() {
return (
<>
<MaterialTable
tableRef={this.tableRef}
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: 1987, birthCity: 63 },
]}
title="Detail Panel With RowClick Preview"
detailPanel={rowData => {
return (
<iframe
width="100%"
height="315"
src="https://www.youtube.com/embed/C0DPdy98e4c"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
/>
)
}}
onRowClick={(event, rowData, togglePanel) => togglePanel()}
/>
<button onClick={() => {
this.tableRef.current.onToggleDetailPanel([0], rowData => <div>{rowData.name}</div>)
}}>toggle second line</button>
</>
)
}
}
You can use as used in above example.
Yes you can do that. Material table mutates your data by adding a tableData object to each item.
It looks like this:
"tableData":{"id":0,"checked":true}}
This controls the row id, if the item is checked and other things like filtering etc.
By changing the checked key to true/false, you can control the selection of the items programmatically.
Hope this helps. Happy coding.