Can you tell me how to do multiple lines output (with separator, like \n or <br>) when using boostrap table next (bootstrap table 2) in React
import BootstrapTable from 'react-bootstrap-table-next';
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
const products = [
id: '1',
name: 'line1<br>line2<br>line3',
price: '123'
];
<BootstrapTable keyField='id' data={ products } columns={ columns } />
You can use formatter. Example:
const columns = [
{
dataField: "status",
text: "Status",
formatter: (cell, row) => (cell || []).map(x => (
//x - status array, example: [{date: 1639134206672, text: "Starting..."},{date: 1639134210590, text: "Completed"}]
<div>
{x.date && (
<small>{(new Date(x.date)).toGMTString() + ': '}</small>
)}
{x.text && (
<span className="status-item">{x.text || '...'}</span>
)}
</div>
)),
},
{
dataField: "date",
text: "Date",
formatter: (cell, row) => (
<small>{cell && (new Date(cell)).toGMTString()}</small>
),
}
];
<BootstrapTable
bootstrap4
keyField='index'
data={ sendlog }
columns={ columns }
defaultSorted={defaultSorted}
/>
Related
Documentation: https://v4.mui.com/components/data-grid/sorting/#data-grid-sorting
const [sortModel, setSortModel] = React.useState([
{
field: 'name',
sort: 'asc',
},]);
const columns = [
{ field: 'name' },
{ field: 'school'}]
const rows = [
{ id: 1, name: 'React', school: 'abc' },
{ id: 2, name: 'Material-UI', school: 'pqr' },]
<DataGrid
columns={columns}
rows={rows}
sortingOrder={['desc', 'asc']}
sortModel={sortModel}
onSortModelChange={(model) => setSortModel(model)}
/>
Clicking on the sort button causes infiite loop
I am using ant table for my project where I want to filter records on click of checkbox inside my header row, when I click on check box all zero valued rows should be filtered and others should stay, is there any way I can do this?
Demo
You can achieve the desired feature by defining a custom columns title prop that renders a controlled Checkbox component in addition to the column's title string. When the Checkbox is true, you then filter out the table data based on your desired filter condition.
(As an aside, I did initially try to get the same functionality to work via the onFilter and filterIcon approach, but that approach proved unsuccessful.)
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Table, Checkbox } from "antd";
import "./index.scss";
const DifferenceTable = (props) => {
const [isChecked, setIsChecked] = useState(false);
const data = [
{
date: "2020-06-17",
units: 2353.0,
amount: 8891206.27,
date: 2323,
units: 243234,
amount: 234234,
units_diff: 0,
amount_diff: 0
},
{
date: "2020-06-17",
units: 2353.0,
amount: 8891206.27,
date: 2323,
units: 243234,
amount: 234234,
units_diff: 1,
amount_diff: 1
}
];
const processedData = isChecked
? data.filter((datum) => datum.units_diff || datum.amount_diff)
: data;
const columns = [
{
title: "Bank",
children: [
{
title: "Trxn Date",
dataIndex: "date",
key: "date",
width: 100
},
{
title: "Sum Units",
dataIndex: "units",
key: "units",
width: 100
},
{
title: "Sum Amounts",
dataIndex: "amount",
key: "units",
width: 100
}
]
},
{
title: "CUSTOMER",
children: [
{
title: "Trxn Date",
dataIndex: "date",
key: "date",
width: 100
},
{
title: "Sum Units",
dataIndex: "units",
key: "units",
width: 100
},
{
title: "Sum Amounts",
dataIndex: "amount",
key: "amount",
width: 100
}
]
},
{
title: () => (
<div>
<span>Difference </span>
<Checkbox
checked={isChecked}
onChange={(e) => {
setIsChecked(e.target.checked);
}}
/>
</div>
),
dataIndex: "units_diff",
key: "units_diff",
children: [
{
title: "Units",
dataIndex: "units_diff",
key: "units_diff",
width: 100
},
{
title: "Amounts",
dataIndex: "amount_diff",
key: "amount_diff",
width: 100
}
],
align: "center"
}
];
return (
<Table
// rowKey="uid"
className="table diff_table"
columns={columns}
dataSource={processedData}
pagination={false}
scroll={{ y: 400, x: 0 }}
/>
);
};
ReactDOM.render(<DifferenceTable />, document.getElementById("container"));
A functional demo is available at the following CodeSandbox link
I need help on including the formatted data into the search functionality. For some reason the formatted links are not included in the search
function docFormatter(cell, row, rowIndex) {
return (
<a href={${row.doc.doclink}}>
{row.doc.docname}
);
}
const columns = [
{ dataField: "sno", text: "S.No" },
{
dataField: "doc",
text: "Document Name",
formatter: docFormatter,
filterValue: docFormatter,
},
];
I have a customer formatter and that returns a anchor tag with a text. the search is not working on this.
I looked document https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-search.html#search-on-formatted-data
..., {
dataField: 'type',
text: 'Job Type',
formatter: (cell, row) => types[cell],
filterValue: (cell, row) => types[cell] // we will search the value after filterValue called
}
I did'nt understand how to implement this by referencing this. Please help me on this. Thanks
Here is the working model fixing this issue
function docFormatter(cell, row, rowIndex) {
return (
<a href={${row.doc.doclink}}>
{row.doc.docname}
);
}
function docFormatterFilter(cell, row) {
return cell.docname;
}
const columns = [
{ dataField: "sno", text: "S.No" },
{
dataField: "doc",
text: "Document Name",
formatter: docFormatter,
filterValue: (cell, row) => docFormatterFilter(cell, row),
},
];
I'm encountering the same issue but can't find solution.
function docFormatterFilter(cell, row) {
return row.nom;
}
export const fieldsUser = [
{
dataField: 'id',
sort:true,
text: '',
formatter: (cell, row) => {
return (
<div className={`flex-grow-1`}>
<div className="d-flex align-items-center justify-content-between">
<h4 className="m-0">{row.nom}</h4>
<small className={ `role-groupe text-center ${row.role==='s' ? 'bg-danger' : row.role==='a'?'bg-success':'bg-primary'}` }>{row.role_label}</small>
</div>
</div>
)},
filterValue: (cell, row) => docFormatterFilter(cell, row),
filter: textFilter({
caseSensitive: false,
comparator: Comparator.LIKE,
}),
classes: 'col-12',
}
];
Nothing works since a week.
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>
},
I have a table using react-table but for one of the columns I want to show two pieces of data - name and description.
getInitialState(){
return {
data: [{
id: 1,
keyword: 'Example Keyword',
product: [
name: 'Red Shoe',
description: 'This is a red shoe.'
]
},{
id: 2,
keyword: 'Second Example Keyword',
product: [
name: 'blue shirt',
description: 'This is a blue shirt.'
]
}]
}
},
render(){
const { data } = this.state;
return (
<div className="app-body">
<ReactTable
data={data}
columns={[{
columns: [{
Header: 'Id',
accessor: id,
show: false
}, {
Header: 'Keyword',
accessor: 'keyword'
}, {
Header: 'Product',
accessor: 'product' // <<< here
}]
}]}
defaultPageSize={10}
className="-highlight"
/>
</div>
)
}
Where the accessor is Product I want to show both the name and description (I'll style them to stack with different font sizes) in the Product column.
I've tried using the Cell: row => attribute for that column and thought I could also try calling a function that lays it out, but I've gotten errors both times.
Any ideas how to do this?
Indeed you should use Cell for this like this:
getInitialState(){
return {
data: [
{
id: 1,
keyword: 'Example Keyword',
product: [
name: 'Red Shoe',
description: 'This is a red shoe.'
]
},{
id: 2,
keyword: 'Second Example Keyword',
product: [
name: 'blue shirt',
description: 'This is a blue shirt.'
]
}]
}
},
render(){
const { data } = this.state;
return (
<div className="app-body">
<ReactTable
data={data}
columns={[{
columns: [{
Header: 'Id',
accessor: id,
show: false
}, {
Header: 'Keyword',
accessor: 'keyword'
}, {
Header: 'Product',
accessor: 'product',
Cell: ({row}) => { //spread the props
return (
<div>
<span className="class-for-name">{row.product.name}</span>
<span className="class-for-description">{row.product.description}</span>
</div>
)
}
}]
}]}
defaultPageSize={10}
className="-highlight"
/>
</div>
)
}
Another thing I spotted was that product property should be an object not an array, so change this:
product: [
name: 'blue shirt',
description: 'This is a blue shirt.'
]
to this:
product: {
name: 'blue shirt',
description: 'This is a blue shirt.'
}
The accepted answer didn't work for me. Here's how I did it:
const [data, setData] = React.useState([
{
name: 'My item',
desc: 'This is a nice item',
},
]);
const columns = React.useMemo(() => [
{
Header: 'Name',
accessor: 'name',
Cell: (props) => (
<>
<p className="item title">{props.row.original.name}</p>
<p className="item desc">{props.row.original.desc}</p>
</>
),
},
]);