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.
Related
I am using antd to create a table with filter feature,
but I got a problem, I want to custom filter search of antd to call api,
antd table
How can I do that with react and antd,
Here is my code
const columns: ColumnsType<Product> = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: (name, record) => (
<div className="flex items-center">
<Avatar src={record.avatar}>{name[0].toUpperCase()}</Avatar>
<span style={{ marginLeft: 10 }} className="whitespace-nowrap">
<a title="View & Edit" href={'/product/' + record.id}>
{name}
</a>
</span>
</div>
),
},
{
title: 'About',
dataIndex: 'about',
key: 'about',
render: (about: string) => <p className="text-ellipsis line-clamp-2">{about}</p>,
width: 400,
},
{
title: 'Categories',
dataIndex: 'categories',
key: 'categories',
filterSearch: true,
filters: categories!.map((category: Category) => ({ text: category.name, value: category.id })),
render: (categories: any) => {
console.log(categories);
return '-';
},
// width: 400,
},
{ title: 'Addresses', dataIndex: 'contract_addresses', key: 'address', render: addresses => addresses?.[0] },
];
To filter the table, I usually provide a function that filters the data before it is passed to the table (In my example the function getData. This function can also be used to adjust the filter accordingly. Here is an example, which also consists of a Search-Input to modify the search:
const CustomersTable = (props: any) => {
const [searchText, setSearchText] = useState<string | undefined>(undefined);
const [customers, setCustomers] = useState<ICustomer[]>([]);
const getData = (
sourceData: Array<ICustomer>,
searchText: string | undefined
) => {
if (!searchText) {
return sourceData;
}
return sourceData.filter((item) => {
const comparisonString = `${item.firstname.toLowerCase()}${item.familyname.toLowerCase()}`;
//here you can provide a more sophisticared search
return comparisonString.includes(searchText.toLowerCase());
});
};
const columns = [
{
title: "Vorname",
dataIndex: "firstname",
key: "firstname",
sorter: (a: ICustomer, b: ICustomer) => {
if (a.firstname.toLowerCase() > b.firstname.toLowerCase()) {
return -1;
} else if (a.firstname.toLowerCase() < b.firstname.toLowerCase()) {
return 1;
} else {
return 0;
}
},
},
{
title: "Nachname",
dataIndex: "familyname",
key: "familyname",
},
];
return (
<>
<Search
placeholder="Vorname, Nachname"
value={searchText}
onChange={(e) => {
setSearchText(e.target.value);
}}
/>
<Table
columns={columns}
dataSource={getData(customers, searchText)}
/>
</>
);
};
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}
/>
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.
currently creating my datatable using grid.js in reactjs.
This is my code
<Grid
data={data.filter(e => e.status != 0)}
columns={[
{
id: 'url',
name: 'url',
hidden: true
}, {
id: 'id',
name: '#',
formatter: (cell) => _(this.showIndexNo()) //<-- where i do the function to display row index number
}, {
id: 'name',
name: 'Name'
}, {
id: 'smgk_name',
name: 'SM Name',
formatter: (cell, row) => _(this.showSmlink(row.cells[0].data, row.cells[3].data))
}, {
id: 'email',
name: 'Email',
// formatter: (cell) => _(moment(cell).format(MOMENT_FORMAT))
},
{
id: 'id',
name: 'Actions',
formatter: (cell) => _(this.showButton(cell))
//(cell) => `Name: ${cell}`
}
]}
search={true}
sort={true}
/>
I want to display the row index/ auto increment in my grid js.
How should i edit this code?
showIndexNo() {
const { subscriberData } = this.state;
let a = [];
return (subscriberData.filter(e => e.status != 0).map((item, i) => i ) ) }
and I get this result:
I cannot use ID as the row Index as when I delete one details the Id will still be there only status will changed to deleted(this wont be displayed in grid), so I need row Index. Really appreciate any help
return (subscriberData.filter(e => e.status != 0).map((item, i) =>
return { ...item,
rowIndex: i //use rowIndex as column
}))
}
I am using react-table to generate tables(https://react-table.js.org/#/story/readme). I have a state defined as following:
this.state = {
sampleTable:[
{author: 'Mac', books: [{title:'One', price: 20}, {title:'Two', price: 20}]},
{author: 'Rick', books: [{title:'Three', price: 20}, {title:'Four', price: 20}]}
],
sampleTableColumns:[
{Header: 'Author', accessor: 'author'},
{Header: 'Books', accessor: 'books.title'},
],
};
And I am trying to make table as following:
<ReactTable
className="-highlight"
data={this.state.sampleTable}
columns={this.state.sampleTableColumns}
defaultPageSize={10}
/>
However in the books column I see nothing. I am not sure how am I supposed to iterate over books array so that I can print say book titles in books column?
I had to write my accessor like following:
sampleTableColumns:[
{
Header: 'Author',
accessor: 'author',
},
{
Header: 'Books',
id:'books',
accessor: data => {
let output = [];
_.map(data.books, book => {
output.push(book.title);
});
return output.join(', ');
},
},
],
It's simple without using any dependencies like lodash...
You just need to use React-table Cell attribute
sampleTableColumns:[
{
Header: 'Author',
accessor: 'author',
},
{
Header: 'Books',
accessor: 'books',
Cell: (props) => {
const { sampleTable} = props.original;
return (
{ sampleTable.books.map( (book) =>(<h4>{book.title}</h4>)) }
);
},
},],
I believe Shivam Modi answered it. Using TypeScript his solution could be rendered something like (using built-in row selector):
{
Header: "Books",
accessor: "books",
Cell: ({ row }) => {
return (
row.original.books
.map((book: Book) => (
<div key={book.id}>
<h4>{book.name}</h4>
</div>
))
);
},
},
Your books data is an array and I don't believe react-table knows how to render those by default. You can instead supply your own render function in the sampleTableColumns for that cell, which would look something like:
sampleTableColumns:[
{Header: 'Author', accessor: 'author'},
{
Header: 'Books',
accessor: 'books'
render: (rowInfo) => {
return (
<span>
{rowInfo.value.map(book => (<span>{book.title}</span>))}
</span>
},
},
],
Well, I am too late for the party but all above doesn't work for me and I tried to use ES6 syntax. I have requested data in array, so here we go (I renamed variables):
export const returnPreparedField = (array) => {
const newArray = [];
for (let arrayValue of array) {
const newElement = {
id: "element",
header: element,
accessor: data => data.element.find(elementToFind => (elementToFind.name === element))?.value,
show: true,
width: 100
};
newArray.push(newElement);
}
return newArray;
};