I am expanding my table rows on click using expandedRowRender, and they both expand from first column. Is there a way to specify from which column the row should expand from? For example, only expand from column 2 onwards?
columns = [
{
title: "Name",
dataIndex: "name",
},
{
title: "Surname",
dataIndex: "surnamen",
},
{
title: "Region",
dataIndex: "region",
},];
<Table
bordered
dataSource={this.dataSource}
columns={this.columns}
expandRowByClick={true}
expandIconAsCell={false}
expandedRowRender={(expaned) => expaned ? <minitable /> : null}
/>
Add children to the specific column:
dataSource={[
{
name: 'Alex',
surnamen: 'Abramov',
region: 'React-Realm',
children: [{ surnamen: 'myData' }]
}
]}
After that, you can control the indentSize prop.
Check out the demo, try filling indentSize={80} in InputNumber.
Related
How can I change the text "(Add or remove columns)" and icon of (columnsButton or Hiding Columns Button) in a material table?
For example for the code below:
function HideColFrmTbleNotFrmColsBtn() {
return (
<MaterialTable
options={{
// Allow user to hide/show
// columns from Columns Button
columnsButton: true,
}}
data={[
{
name: "Foo",
surname: "Bar",
},
{
name: "Baz",
surname: "Fee",
},
]}
columns={[
{
title: "Name",
field: "name",
// `name` field is hidden in table
// but not in Columns Button
hidden: true,
},
{
title: "Surname",
field: "surname",
},
]}
/>
);
}
https://material-table-core.com/demos/columns/hide/
You can see this code on the document page related to the material-table, and you can also see its details. I want to use columnsButton property to hide the table's columns, but I want to change its text (Add or remove columns) and icon. How can I do this?
Please see this picture I want to change (Add or remove columns):
I am using 'react-data-table-component' in React JS.
Following is my sample structure:
import DataTable from "react-data-table-component";
const data = myData;
const columns = [
{
name: 'Date',
selector: 'dateOfAction',
cell: row => <div>{moment(row.dateOfAction).format("MM-DD-YYYY A")}</div>,
sortable: true,
},
{
name: 'History Date',
selector: 'dateOfAction',
cell: row => <div>{moment(row.dateOfAction).format("YYYY-MM-DD HH:mm:ss")}</div>,
sortable: true,
}
];
<DataTable
columns={columns}
data={data}
defaultSortField="dateOfAction"
pagination
striped
defaultSortAsc={false}
/>
Here, Both columns have same selector.
And, I am able to sort data by first column i.e 'Date' but I want to sort table data by last column i.e 'History Date'.
How should I sort data by last column?
Thanks!
You can pass the defaultSortFieldId prop in the DataTable component. According to the documentation:
The defaultSortFieldId sets the a column to be pre sorted and
corresponds to the a column definition id
This means that you will need to provide an unique id for each column and then pass the id you want to use to the defaultSortFieldId:
const columns = [
{
id: 'date',
name: 'Date',
selector: 'dateOfAction',
cell: row => <div>{moment(row.dateOfAction).format("MM-DD-YYYY A")}</div>,
sortable: true,
},
{
id: 'historyDate',
name: 'History Date',
selector: 'dateOfAction',
cell: row => <div>{moment(row.dateOfAction).format("YYYY-MM-DD HH:mm:ss")}</div>,
sortable: true,
}
];
<DataTable
columns={columns}
data={data}
defaultSortFieldId="historyDate"
pagination
striped
defaultSortAsc={false}
/>
I am using react-bootstrap-table2 for table in react project and using search on table. On columns with single and straight data, search is working fine. But on columns with formatted value, search is not working.
Below is structure of my data (sample) to display on table:
[
{
"id": 121212,
"user": "Test1",
"plates": [
{
"id": 101,
"plate": "AA-1122",
},
{
"id": 102,
"plate": "AB-1100",
}
]
},
...]
Below is code for Columns:
columns = [
{ dataField: "id", text: "Id", hidden: true },
{
dataField: "user",
text: "User",
sort: true,
},
{
dataField: "plates",
text: "Plates Test",
formatter: (cell, row) => row.plates.map(x => <>{x.plate}</>),
filterValue: (cell, row) => formatterFilter(cell, row),
}, ];
function formatterFilter(cell, row) {
return cell.plate;
}
Below is code for ToolkitProvider:
<ToolkitProvider
keyField="id"
data={props.data}
columns={props.columns}
// search
search={{ searchFormatted: true }}
>
...
<SearchBar
{...props.searchProps}
style={styles.search}
placeholder="Type Search criteria to filter data"
/>
...
</ToolkitProvider>
As in above code, I am displaying list of plates in a column and want to search on all the columns in table. On Id and User column search is working fine, but on Plates Test column its not working.
Any help on this is appreciated.
I have already gone through below code in Storybook, but don't understand how I can utilize this in my case:
formatter: (cell, row) => types[cell],
filterValue: (cell, row) => types[cell] // we will search the value after filterValue called
I was able to solve this issue with below approach, in case it may help anyone:
columns = [
{ dataField: "id", text: "Id", hidden: true },
{
dataField: "user",
text: "User",
sort: true,
},
{
dataField: "plates",
text: "Plates Test",
hidden: true,
formatter: (cell, row, rowIndex, extraData) => {
//Here I created array and not was able to search on this column.
let plateArr = [];
row.plates.map(x => {
plateArr.push(x.plate);
})
return plateArr.join()
},
},];
And in this case filterValue property was not required.
I am generating dataTable using material-table plugin in ReactJS. I couldn't find any direct way or option to generate rowspan or column span at dataTable using the plugin. Is there any way to do it ?
Here is a sample screenshot of what table might look like but will be shown via dataTable
The explanation of what you are trying to do is a little bit unclear.
If you want to add something like a button on each row in a col span you can define it in the "columns" prop of your Table like so:
columns={[
{ title: 'Update', field: '', render: rowData => <button onClick={() => doSomethingWithId(rowData.id)} className="myTableButtonStyle" /> },
{ title: 'Name', field: 'name' },
....
]}
This will add an update button which will call on the doSomethingWithId() function passing the id of the line as a parameter.
Is it what you are looking for? Else would you mind explaining a little bit more what you want?
EDIT
Here is what i obtain
with the following code
<MaterialTable
data={[
{ name: '', nationality: 'British', address: '', country: 'England' },
{ name: 'Noor', nationality: 'American', address: 'California', country: 'US' },
{ name: '', nationality: 'Chinese', address: '', country: 'China' },
{ name: '', nationality: '', address: '', country: '' },
]}
columns={[
{ title: 'Name', field: 'name' },
{ title: 'Nationality', field: 'nationality' },
{ title: 'Address', field: 'address' },
{ title: 'Country', field: 'country' },
]}
options={{
rowStyle: {
height: '25px',
},
}}
title="Display Data"
/>
You don't need to add rows or colspan to achieve this render, just giving the good dataSet and the Columns definition will do.
In your data props you need to give a list of objects with all the datas you need.
You then define which datas are displayed where with the columns props. if you want a more personalize render in one column (ex: you want to display the country in bold) you can define it by giving a render in the columns object like so:
{title: 'Country', field: '', render: rowData => <strong>{rowData.country}</strong>
for the empty row to have the same size as others, use props options on your table.
Does this help you?
I am using react-table but I have 2 values that I want to join into one cell. Does anyone know how to do this?
Say I have this sample code, right now it has "name" which as the first and last name combined.
What happens if in my db I have it separate by first name and last. How could I join them together in the ui here(I know I could do this at the db level but this just an example)
import ReactTable from 'react-table'
render() {
const data = [{
name: 'Tanner Linsley',
age: 26,
friend: {
name: 'Jason Maurer',
age: 23,
}
},{
...
}]
const columns = [{
Header: 'Name',
accessor: 'name' // String-based value accessors!
}, {
Header: 'Age',
accessor: 'age',
Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
}, {
id: 'friendName', // Required because our accessor is not a string
Header: 'Friend Name',
accessor: d => d.friend.name // Custom value accessors!
}, {
Header: props => <span>Friend Age</span>, // Custom header components!
accessor: 'friend.age'
}]
<ReactTable
data={data}
columns={columns}
/>
}
would this work?
const columns = [
{
Header: 'Full Name',
accessor: d => `${d.firstName} ${d.lastName}`
}
]
In case you want to sort by one of the values
{
Header: "Price",
accessor : "unit_price", // matters for grouping and sorting
Cell : props => <span>
{props.original.currency} {Numeral(props.original.unit_price).format('0,0.00')}
</span>
},