Pagination not working in react-bootstrap-table2 - reactjs

I am using react-bootstrap-table2-paginator for adding Pagination to my BootstrapTable. I get the below error when I add the Pagination part in the table. Am I missing some imports or something ?
invariant.js:39 Uncaught Error: a.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
Here is the code for the component.
import React, { Component } from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import cellEditFactory from 'react-bootstrap-table2-editor';
import paginationFactory from 'react-bootstrap-table2-paginator';
class OverviewComponent extends Component {
constructor(props) {
super(props);
}
const products = [];
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
function addProducts(quantity) {
const startId = products.length;
for (let i = 0; i < quantity; i++) {
const id = startId + i;
products.push({
id: id,
name: 'Item name ' + id,
price: 2100 + i
});
}
}
addProducts(12);
render() {
return (
<div className="container-fluid">
<div className="row">
<BootstrapTable
striped
hover
condensed
maxHeight={15}
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEditFactory({ mode: 'dbclick' }) }
pagination={ paginationFactory() }
/>
</div>
</div>
);
}
}
export default OverviewComponent;
Any help would be appreciated.
Thanks

I've corrected some faults with the original implementation. You want to make use of this.state
import React, { Component } from "react";
import BootstrapTable from "react-bootstrap-table-next";
import cellEditFactory from "react-bootstrap-table2-editor";
import paginationFactory from "react-bootstrap-table2-paginator";
class OverviewComponent extends Component {
constructor(props) {
super(props);
this.state = {
products: [],
columns: [
{
dataField: "id",
text: "Product ID"
},
{
dataField: "name",
text: "Product Name"
},
{
dataField: "price",
text: "Product Price"
}
]
};
this.addProduct = this.addProduct.bind(this);
}
addProduct(quantity) {
const startId = products.length;
let { products } = this.state;
for (let i = 0; i < quantity; i++) {
const id = startId + i;
products.push({
id: id,
name: "Item name " + id,
price: 2100 + i
});
}
this.setState({ products: products });
}
render() {
const { products, columns } = this.state;
return (
<div className="container-fluid">
<div className="row">
<BootstrapTable
striped
hover
condensed
maxHeight={15}
keyField="id"
data={products}
columns={columns}
cellEdit={cellEditFactory({ mode: "dbclick" })}
pagination={paginationFactory()}
/>
</div>
</div>
);
}
}
export default OverviewComponent;

Try this, it worked for me. I also had a problem with the wrapper at runtime.
npm install react-bootstrap-table2-paginator#0.1.6 --save
Also, this only works for react#16.0.0 and up. You can upgrade to the latest version of react and react-dom with this:
npm install --save react#latest react-dom#latest
for specific version just specify the version in place of the word latest. eg
npm install --save react#16.4.2 react-dom#16.4.2

Related

Data does't appear in datatables

Data tidak tampil pada datatables
import React, { Component } from 'react';
import Linkify from 'react-linkify';
import './CobaData.css';
import './css/jquery.dataTables.css';
const $ = require('jquery')
$.Datatable = require('datatables.net')
export default class CobaData extends Component {
constructor(props) {
super(props);
}
render() {
let data = this.props.data;
let printData = data;
console.log(printData);
let table = $('#exc').dataTable(
{
data: printData,
columns: [
{ title: "ID" },
{ title: "Nama" },
{ title: "Nomor KTP" },
{ title: "Nomor HP" },
],
searchable: false,
orderable: false,
targets: 0,
}
);
console.log(table);
return (
<div>
<table className="display" width="100%" id="exc" >
</table>
</div>
);
}
}
data can't display datatables, when in console.log(printData) can be read in 'console'
before I used a normal table can be read on the table, but when using datatables on the data can not be read on the table
Using jQuery in a react app is not a good approach.
Instead I would recommend you to use react-data-table-component.
And then your Component would be like this:
import React, { Component } from 'react';
import DataTable from 'react-data-table-component';
import Linkify from 'react-linkify';
import './CobaData.css';
const columns = [
{
name: 'ID',
selector: 'id_karyawan'
},
{
name: 'Nama',
selector: 'nama'
},
{
name: 'Nomor KTP',
selector: 'KTP'
},
{
name: 'Nomor HP',
selector: 'no_hp'
},
];
export default class CobaData extends Component {
render() {
let data = this.props.data;
return (
<DataTable
title="Arnold Movies"
columns={columns}
data={data}
/>
);
}
}

React Bootstrap Table modifications and filtering

Modifying react bootstrap table layout to look like a react card list rather than table and enabling button filters.
I've added a basic table with filter. I wanted to find out if there is a way to modify the table's layout structure so that it looks more like bootstrap cards rather than a table. Also, my filter doesn't seem to be working. Once I click a button to apply a particular category nothing is shown. Also, is there a way to hide the input selection on the table and just leave the button?
import React, { Component } from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
import filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
class Favourites extends Component {
constructor(props){
super(props);
}
render() {
const { SearchBar } = Search;
const products_data = [
{
"id": "28f07624",
"name": "Workbook1",
"createdAt": "2019-05-17T17:51:17Z"
},
{
"id": "a3c798fd",
"name": "Workbook2",
"createdAt": "2019-05-14T12:19:38Z",
},
{
"id": "520dccf8",
"name": ["Workbook3", "Workbook4"],
"createdAt": "2019-05-16T13:31:07Z"
}
];
let qualityFilter;
const selectOptions = {
0: 'Workbook1',
1: 'Workbook2',
2: 'Workbook3'
};
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name',
filter: selectFilter({
options: selectOptions,
getFilter: (filter) => {
// qualityFilter was assigned once the component has been mounted.
qualityFilter = filter;
}
})
}, {
dataField: 'createdAt',
text: 'Product Quality',
}];
const handleClick = () => {
qualityFilter(0);
};
return (
<div className="fluid-container">
<div className="container body_wrap">
<h1>Favourites</h1>
<button className="btn btn-lg btn-primary" onClick={ handleClick }>{' Workbook1 '}</button>
<BootstrapTable keyField='id' data={ products_data } columns={ columns } filter={ filterFactory() } />
</div>
</div>
);
}
}
export default Favourites;

How to make a component using <TableRow/>, for breaking up <Table/> component in Ant Design

I want to make a component for the rows in Ant Design Table, where each component will have their own state and based on that table rows will be shown. is it possible?
if possible how can I do it? an example will be helpful.
I tried the following example but it's showing 'No Data'
in item.js
import React, { Component } from "react";
import TableRow from "antd";
class Item extends Component {
constructor(props) {
super(props);
}
dataSource = [
{
key: "1",
details: "test",
price: 50
}
];
render() {
return <TableRow dataSource={this.dataSource} />;
}
}
export default Item;
and in itemlist.js
import React, { Component } from "react";
import { Table } from "antd";
import Item from "./item";
class ItemList extends Component {
constructor(props) {
super(props);
}
columns = [
{
title: "Item Details",
dataIndex: "details",
key: "details"
},
{
title: "Price",
dataIndex: "price",
key: "price"
}
];
render() {
return (
<Table column={this.columns}>
<Item key="1" />
</Table>
);
}
}
export default ItemList;
I'm still not totally get your requirements, but from I understand: you can define render in column definition, and there you'll get an row item:
class ItemList extends Component {
dataSource = [
{
key: "1",
details: "test",
price: 50
}
];
columns = [
{
title: "Item Details",
dataIndex: "details",
render: (text, record, index) => <Item {...record} />
key: "details"
}
];
render() {
return (
<Table columns={this.columns} dataSource={this.dataSource} />
);
}
}
If you just need to not show some rows based on data, you can filter dataSource accordingly.

Enzyme setState not re-rendering the component

I am trying to set a state using enzyme method. After setting a state inside test case I was able to get it back again within the test case which proves that setState is working and I can see the expected output in console. However, inside component I was not able to get state which was set by enzyme because of this my is failing and I am not getting desire view back from component, here is screenshot. You can see there is not data grid table rendered despite having rows data.
table.js
import React, { Component } from 'react';
import styled from 'styled-component';
import ReactDataGrid from 'react-data-grid';
import { Filters } from 'react-data-grid-addons';
import PropTypes from 'prop-types';
export class Table extends Component {
constructor(props) {
super(props);
const {
NumericFilter,
AutoCompleteFilter,
} = Filters;
this.columns = [
{ key: "id", name: "ID", editable: true },
{ key: "title", name: "Title", editable: true },
{ key: "complete", name: "Complete", editable: true }
];
this.state = {
rows: [],
};
}
renderRow = (i) => {
const { rows } = this.state;
return rows[i];
}
render() {
const { className } = this.props;
const { rows } = this.state;
console.log('rows Length', rows.length) // always 0
return (
<div className={className}>
{rows.length
? (
<ReactDataGrid
rowHeight={50}
columns={this.columns}
rowGetter={this.renderRow}
rowsCount={rows.length}
/>
)
: <span id="no-product-message">No Items to be Shown</span>
}
</div>
);
}
}
Table.propTypes = {
className: PropTypes.string,
};
Table.defaultProps = {
className: '',
};
export default styled(Table)`
.react-grid-HeaderCell{
white-space: normal !important;
}
.react-grid-Cell__value{
display: flex;
align-items: center;
}
`;
mountWithTheme
export const mountWithTheme = (children, options) => (
mount(<ThemeProvider theme={theme}>{children}</ThemeProvider>, options)
);
test case
it('should render table if product data is available', () => {
const wrapper = mountWithTheme(<Table />).find(Table);
const instance = wrapper.instance();
jest.spyOn(instance, 'renderRow');
instance.setState({
rows: [{ id: 0, title: "Task 1", complete: 20 }],
});
console.log(instance.state.rows) // [{ id: 0, title: "Task 1", complete: 20 }]
expect(wrapper.find('ReactDataGrid').exists()).toBe(true);
expect(instance.renderRow).toHaveBeenCalledTimes(1);
});

Check the render method of `PluginHost$$1

Error appearing is:
bundle.js:1517 Warning: React.createElement: type is invalid -- expected a string (for built-in components)
or a class/function (for composite components) but got: undefined.
You likely forgot to export your component from the file it's defined in.
Check the render method of `PluginHost$$1`.
in PluginHost$$1 (created by Grid)
in Grid (created by Grid$$1)
in Grid$$1 (created by ProductsAndComponentsForLibrary)
in div (created by ProductsAndComponentsForLibrary)
in div (created by ProductsAndComponentsForLibrary)
in div (created by ProductsAndComponentsForLibrary).
This is the relevant code:
import React from 'react';
import {
PagingState,
LocalPaging,
} from '#devexpress/dx-react-grid';
import {
Grid,
Table,
TableHeaderRow,
TableColumnResizing,
PagingPanel,
} from '#devexpress/dx-react-grid-bootstrap3';
import Chip from 'material-ui/Chip';
import ProductsComponentsOfLibrary
from '../../../services/dependencyManager/database/LoadProductsAndComponentsUsingLibrary';
import LoadingScreen from '../Common/LoadingScreen';
const columns = [
{ name: 'Number', title: '' },
{ name: 'ProductName', title: 'The Product Name' },
{ name: 'ProductVersion', title: 'The Product Version' },
{ name: 'ProductLevelDependency', title: 'Product Level Dependency' },
{ name: 'ComponentName', title: 'Component Name' },
{ name: 'ComponentVersion', title: 'Component Version' },
{ name: 'ComponentType', title: 'Component Type' },
];
export default class ProductsAndComponentsForLibrary extends React.PureComponent {
/**
* #class ProductsForLibrary
* #extends {Component}
* #param {any} props props for constructor
* #description Sample React component
*/
constructor(props) {
super(props);
this.state = {
tRows: [],
showTable: false,
columnWidths: {
Number: 100,
ProductName: 350,
ProductVersion: 160,
ProductLevelDependency: 200,
ComponentName: 400,
ComponentVersion: 200,
ComponentType: 200,
},
expandedRows: [],
libraryName: '',
libraryVersion: '',
loading: '',
numberOfRecords: 0,
};
this.loadTable = this.loadTable.bind(this);
}
componentWillReceiveProps(props) {
if (props.renderCondition) {//eslint-disable-line
this.setState({
libraryName: props.nameLibrary,//eslint-disable-line
libraryVersion: props.versionLibrary,//eslint-disable-line
numberOfRecords: 0,
showTable: false,
});
this.loadTable(props.nameLibrary, props.versionLibrary);
}
}
/**
* Load Products and Components using the given library
*/
loadTable(lName, lVersion) {
ProductsComponentsOfLibrary.getProductsAndComponentsUsingLibrary(lName, lVersion).then((response) => {
let i = 0;
const array = [];
if (response.data.length > 0) {
for (i; i < response.data.length; i++) {
array[i] = {
Number: ++i,
ProductName: response.data[--i].PRODUCT_NAME,
ProductVersion: response.data[i].PRODUCT_VERSION,
ProductLevelDependency: response.data[i].PRODUCT_LEVEL_DEPENDENCY,
ComponentName: response.data[i].COMPONENT_NAME,
ComponentVersion: response.data[i].COMP_VERSION,
ComponentType: response.data[i].COMP_TYPE,
};
}
} else {
array[0] = 'No results';
}
this.setState({
tRows: array,
numberOfRecords: response.data.length,
showTable: true,
});
});
}
render() {
let returnView;
if (this.props.renderCondition) {
if (this.state.showTable) {
returnView = (
<div>
{this.state.numberOfRecords > 0 ?
<div>
<div>
<Chip>
{this.state.numberOfRecords} results are returned
</Chip>
</div>
<Grid
rows={this.state.tRows}
columns={columns}
>
<PagingState
defaultCurrentPage={0}
pageSize={12}
/>
<LocalPaging />
<Table />
<TableColumnResizing defaultColumnWidths={this.state.columnWidths} />
<TableHeaderRow allowResizing />
<PagingPanel />
</Grid>
</div>
:
<Chip>
No Libraries Found
</Chip>
}
</div>
);
} else {
returnView = (
<LoadingScreen />
);
}
}
return (
<div>
{returnView}
</div>
);
}
}
Check what version of Grid and React installed. The dx-react-grid-bootstrap3 version ^1.0.0-beta.1 is compatible with react 15 while beta.2 requires react 16.
I had the same problem and fixed it by changing my package.json from this:
"#devexpress/dx-react-core": "^1.0.0-beta.1",
"#devexpress/dx-react-grid": "^1.0.0-beta.1",
"#devexpress/dx-react-grid-bootstrap3": "^1.0.0-beta.1",
to this:
"#devexpress/dx-react-core": "1.0.0-beta.1",
"#devexpress/dx-react-grid": "1.0.0-beta.1",
"#devexpress/dx-react-grid-bootstrap3": "1.0.0-beta.1",
and then after npm install it works fine (with React v15).
Actually It worked when I used VirtualTableView instead of Table from '#devexpress/dx-react-grid-bootstrap3' together with your alteration #ischenkodv

Resources