Comments (5)
@rizalamhadi can please share some more details on this like screenshot of your browser console and code snippet if possible.
from react-datatable.
of course
my Code
`import React from "react";
import axios from "axios";
import { Link } from "react-router-dom";
import { withRouter } from "react-router-dom";
import { TransaksiMasukGetAPI } from "../../../../utils/APIHelpers";
import { removeUserFromSession, getPermission } from "../../../../utils/Common";
import Header from "../../../Header/Header";
import Sidebar from "../../../Sidebar/Sidebar";
import Footer from "../../../Footer/Footer";
import ReactDatatable from "@ashvin27/react-datatable";
class Masuk extends React.Component {
constructor(props) {
super(props);
if (sessionStorage.getItem("admin") !== null) {
if (sessionStorage.getItem("admin") !== "1") {
removeUserFromSession();
this.props.history.push("/login");
} else {
}
} else {
removeUserFromSession();
this.props.history.push("/login");
}
}
state = {
data: [],
errorFetch: "",
tblColumns: [
{
key: "noref",
text: "NOREF",
sortable: true,
},
{
key: "transaksikas_tanggal",
text: "Tanggal Transaksi",
sortable: true,
},
{
key: "transaksikas_nominal",
text: "Nominal Transaksi",
sortable: true,
},
{
key: "bukukas_nama",
text: "Buku Kas",
sortable: true,
},
{
key: "kategorikas_nama",
text: "Kategori Kas",
sortable: true,
},
{
key: "transaksikas_tipe",
text: "Tipe Transaksi",
sortable: true,
},
{
key: "action",
text: "Action",
class: "action",
width: 100,
align: "left",
sortable: false,
cell: (record) => {
return (
<React.Fragment>
<button
className="btn btn-primary btn-sm"
onClick={() => this.editRecord(record)}
style={{ marginRight: "5px" }}
>
<button
className="btn btn-danger btn-sm"
onClick={() => this.deleteRecord(record)}
>
</React.Fragment>
);
},
},
],
config: {
page_size: 10,
length_menu: [10, 20, 50],
show_filter: true,
show_pagination: true,
pagination: "advance",
button: {
excel: false,
print: true,
csv: false,
},
},
};
handleAddItem = () => {
this.props.history.push("/add-item");
};
componentDidMount() {
document.title = "Transaksi";
if (sessionStorage.getItem("token") !== null) {
const authHeaders = {
Authorization: "Bearer " + sessionStorage.getItem("token").toString(),
};
axios
.get(TransaksiMasukGetAPI(), { headers: authHeaders })
.then((response) => {
if (response.data.status) {
this.setState({
data: response.data.Transaksi,
});
console.log(this.state.data);
} else {
}
})
.catch((error) => {
this.setState({
errorFetch: "Item not found",
});
});
} else {
removeUserFromSession();
this.props.history.push("/login");
}
//console.log(tmp[0].flgIsAccess);
let permission = JSON.parse(getPermission());
let tmp = JSON.parse(permission);
if (tmp[0].Access !== 1) {
removeUserFromSession();
this.props.history.push("/login");
}
}
render() {
return (
Data Transaksi Pemasukkan
Home
- Pemasukkan
<section className="content">
<div className="container-fluid">
<div className="alert alert-success alert-dismissible">
<button
type="button"
className="close"
data-dismiss="alert"
aria-hidden="true"
>
×
</button>
<h5>
<i className="icon fas fa-info"></i> Total Pemasukan Sosial
</h5>
<h2> Rp 100000</h2>
</div>
{/* <div className="row">
<div className="col-12">
<div className="card">
<div className="card-header">
<h3 className="card-title">Data Transaksi</h3>
</div>
<div className="card-header">
<Link to="/addMasuk">
<button
className="btn btn-primary"
>
<i className="fa fa-edit">Tambah Data</i>
</button>
</Link>
</div>
<div className="card-body">
<ReactDatatable
className="table table-bordered table-striped custom-className"
config={this.state.config}
records={this.state.data}
columns={this.state.tblColumns}
/>
</div>
</div>
</div>
</div> */}
<div className="card card-info">
<div className="card-header">
<h3 className="card-title">
<i className="fa fa-table"></i> Kas Sosial Masuk
</h3>
</div>
<div className="card-body">
<div className="table-responsive">
<div>
<Link to="/addMasuk">
<button className="btn btn-primary">
<i className="fa fa-edit">Tambah Data</i>
</button>
</Link>
</div>
<br />
<ReactDatatable
className="table table-bordered table-striped custom-className"
config={this.state.config}
records={this.state.data}
columns={this.state.tblColumns}
/>
</div>
</div>
</div>
</div>
</section>
</div>
<Footer />
</div>
);
}
}
from react-datatable.
Thanks for sharing details.
I think you not define key_column which used as key for every record by react.
Here is an example of defining key column:
http://react-datatable.in/keyColumn.html
import React, { Component } from 'react';
import ReactDatatable from '@ashvin27/react-datatable';
import records from 'data.json';
class KeyColumnExample extends Component {
constructor(props) {
super(props);
this.columns = [
{
key: "name",
text: "Name"
},
{
key: "address",
text: "Address"
},
{
key: "postcode",
text: "Postcode"
},
{
key: "rating",
text: "Rating"
},
{
key: "type_of_food",
text: "Type of Food"
}
];
this.config = {
key_column: 'id',
page_size: 10,
length_menu: [10, 20, 50],
show_filter: true,
show_pagination: false,
button: {
excel: false,
print: false
}
}
this.state = {
records: records
}
}
render() {
return (
<ReactDatatable
config={this.config}
records={this.state.records}
columns={this.columns}/>
);
}
}
from react-datatable.
If still you got same issue then update
from react-datatable.
thank you so much, FIX.
from react-datatable.
Related Issues (20)
- How can i Specify the column maximum width
- 0 not showing in Table
- Displaying nested Object Key
- Is your documenttation site hacked or something???
- Support for Functional Components HOT 2
- Each child in a list should have a unique "key" prop. (on extraButtons) HOT 1
- Incompatibility with bootstrap and Font Awesome 5.x HOT 1
- 0 Int not renders HOT 2
- How can we Add checkbox and select all rows HOT 1
- how do i add scroll on x-scale
- Problem on changing the results per page when the user is in another pagination,
- Is it possible to highlight text base on filter input?
- How to get data from nested json objects HOT 2
- show_filter and show_last not working on false
- This project is dead? HOT 4
- Eliminate y update row ?
- Is this dead?
- React CSV download from Cell tag HOT 1
- How can filter be implemented for the columns?
- Custom Header and Footer
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-datatable.