So, I have a API which returns the data which should be shown in table with datatable option.
I'm using 'mdbreact' to use datatable.
But there is no documentation about pushing array variables into rows of datatables. How to push my array variables into rows of datatables ?
My code :
import React, { Component } from 'react';
import { MDBDataTable } from 'mdbreact';
class DummyTest extends Component {
DummyFunc() {
var data = {
columns: [
{
label: 'Location',
field: 'Location',
sort: 'asc',
width: 150
},
{
label: 'Entry Time',
field: 'EntryTime',
sort: 'asc',
width: 150
},
{
label: 'Exit Time',
field: 'ExitTime',
sort: 'asc',
width: 150
},
],
rows: [
]
};
const datatableProps = {data, rows: datas};
}
In return
<MDBDataTable
striped
bordered
hover
data={datatableProps}
/>
you can update the rows data after fetching it from the API. sample using hooks.
something like this.setState({datatableProps: ...datatableProps, rows: API_ROWD_ATA})
Related
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 try to make a simple table that can select rows of the table and delete them when clicking the delete button.
So.. I use the MDBDataTableV5 component.
If I do not put the checkbox in the table then this is working perfectly(when data of table update).
And If I set table data as statically when first loading time then this is working well even I put the checkbox in the table.
But in this case, If I set the data of the table as state dynamically then this is not working. I get this error when re-render(when getting data from parents).
mdbreact.esm.js:1 Uncaught TypeError: Cannot read property 'checked' of undefined
at n.value .......
Here is my code.
const headCells = [
{
label: 'id',
field: 'user_id',
width: 150,
attributes: {
'aria-controls': 'DataTable',
'aria-label': 'id',
},
},
{
label: 'name',
field: 'user_name',
width: 200,
},
{
label: 'email',
field: 'user_email',
width: 400,
},
{
label: 'level',
field: 'user_level',
width: 100
}
]
export default function WithCheckBoxes(props) {
const [datatable, setDatatable] = React.useState({
columns: headCells,
rows: [],
});
useEffect(()=>{
setDatatable({
columns: headCells,
rows: props.user_list
})
}, [props]);
return (
<>
<MDBDataTableV5
hover
entriesOptions={[5, 20, 25]}
entries={5}
pagesAmount={4}
data={datatable}
checkbox
headCheckboxID='id'
bodyCheckboxID='checkboxes'
getValueCheckBox={(e) => {
}}
/>
</>
);
}
What is wrong in my code?
I use "With checkboxes table" in this link.
https://mdbootstrap.com/docs/react/tables/datatables/
I am loading a react-data-grid with a data source that is populated row by row (a row is added once a second). Once it gets to 9 rows it stops adding rows. I am also having another problem where the grid will not show up until I change the zoom on the screen. It is blank beforehand. Here is my grid element
import React, { Component } from 'react';
import DataGrid from 'react-data-grid';
import 'react-data-grid/dist/react-data-grid.css';
const columns = [
{ key: 'timeStamp', name: 'Date/Time' },
{ key: 'gpsAccuracyValue', name: 'GPS Accuracy' },
{ key: 'speedMph', name: 'Speed' },
{ key: 'battery', name: 'Battery' },
{ key: 'id', name: 'id' },
];
const rows = [
{ id: 0, title: 'Example' },
{ id: 1, title: 'Demo' }
];
class TestGrid extends Component {
render(){
return (
<div>
<DataGrid
columns={columns}
rows={this.props.data}
rowsCount={this.props.data.length}
minHeight={500}
/>
</div>
);
}
}
export default TestGrid;
I pass in the data like this
<TestGrid data={this.props.deviceData} />
CodeSandbox
Adding style={{ height:500 }} seems to have fixed a similar problem I was having and displays more than 9 rows.
I am using datatable with help of mdbreact table from "https://mdbootstrap.com/docs/react/tables/datatables/" here problem with search filter not working with table values. When I type string in search box following error throws and app crashed.
import { MDBDataTable } from 'mdbreact';
const data = {
columns: [
{
label: 'Email',
field: 'emailid',
sort: 'asc',
width: 270
},
{
label: 'First Name',
field: 'namefirst',
sort: 'asc',
width: 270
}
],
rows: [
{"emailid": "xxx#gmail.com", "namefirst": "xxxxx"}]
}
render(){
return(
<div>
<MDBDataTable
striped
hover
data={data}
/>
</div>
}
Here I assigned data static but in my application display dynamic values. On other pages search working fine same code I used but not working one page in my application.
I have integrated datatable in my react js web app.
It works with sample data as i have mentioned in the code pagelist
I have tried to make it component but did not get the result. I am new
in react and did not able to clue to further progress.
Here the list of my import packages
import axios from 'axios'
import React, {Component} from 'react'
import {BrowserRouter,Route,Switch,Link} from 'react-router-dom'
import { MDBDataTable} from 'mdbreact';
// The below call get the data as i have confirmed in the console log
axios.get('/api/pagelist').then(response => {
var pagelist = JSON.stringify(response.data);
console.log(pagelist);
});
//Sample test data which works with the example
var pagelist = [{
name: 'Tiger Nixon',
position: 'System Architect',
office: 'Edinburgh',
age: '61',
date: '2011/04/25',
salary: '$12320'
},
{
name: 'Gavin Joyce',
position: 'Developer',
office: 'Edinburgh',
age: '42',
date: '2010/12/22',
salary: '$92'
},
{
name: 'Jennifer Chang',
position: 'Regional Director',
office: 'Singapore',
age: '28',
date: '2010/11/14',
salary: '$357'
},
{
name: 'Donna Snider',
position: 'Customer Support',
office: 'New York',
age: '27',
date: '2011/01/25',
salary: '$112'
}
];
// Just copy the function and change columns as guided by the documentation
const DatatablePage = () => {
const data = {
columns: [{
label: 'ID',
field: 'id',
sort: 'asc',
width: 60
},
{
label: 'Name',
field: 'name',
sort: 'asc',
width: 150
},
{
label: 'Title',
field: 'title',
sort: 'asc',
width: 150
},
{
label: 'Slug',
field: 'slug',
sort: 'asc',
width: 100
},
{
label: 'Content',
field: 'content',
sort: 'asc',
width: 250
},
{
label: 'Created',
field: 'created_at',
sort: 'asc',
width: 100
}
],
rows: pagelist
};
return (
<MDBDataTable striped bordered hover data = {data}/>
);
}
//Finally exported it
export default DatatablePage;
Looks like a scoping issue to me. The data variable you're storing the page data in is scoped to the axios callback. Once the code leaves that callback, your data is no longer accessible.
axios.get('/api/pagelist').then(response => {
// pageList scoped locally. not accessible outside. this is why the
// console.log works, but there's no data in the table.
var pagelist = JSON.stringify(response.data);
console.log(pagelist);
});
Assuming you're using a component, I suggest adding a constructor and that you create a state property. E.g.
constructor(props) {
super(props);
this.state = {pageList: []} ;
}
You need to then update this in the axios.get....
axios.get('/api/pagelist').then(response => {
// The below line may not be exactly correct. May need to review.
this.setState({pagelist: JSON.stringify(response.data)}, console.log("state updated));
});
Finally, the rows assignment in the datatables method needs to be
rows: this.state.pagelist