#
Tables
Tables
and DataTables
are powered by the famous react-bootstrap-table-next
plugin. Please refer there documentation for more details. https://github.com/react-bootstrap-table/react-bootstrap-table2
#
Importing
import BootstrapTable from 'react-bootstrap-table-next';
#
How to use
const DataTable = ({className, hover, bordered, condensed, striped, keyField, ...rest}) => {
return (
<BootstrapTable
className={ className }
striped={ striped }
hover={ hover }
bordered={ bordered }
condensed={ condensed }
keyField={keyField}
{...rest}
/>
)
}
export default DataTable;
#
Basic Table
#
Importing
import DataTable from "../DataTable";
import { tableOneColumns, tableTwoColumns, tableThreeColumns } from "./Column";
import { tableOneData, tableTwoData, tableThreeData } from "./data";
import "react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css";
import "react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css";
#
How to use
<div className="card-body">
<div className="table-responsive">
<div
id="basicTable_wrapper"
className="dataTables_wrapper no-footer"
>
<DataTable
keyField="title"
bootstrap4
data={dataOne}
columns={columnsOne}
hover={true}
bordered={false}
/>
</div>
</div>
</div>
#
Data Table
#
Importing
import ToolkitProvider, {
CSVExport,
Search,
} from "react-bootstrap-table2-toolkit";
import cellEditFactory from "react-bootstrap-table2-editor";
import Modal from "react-bootstrap/Modal";
import BootstrapTable from "react-bootstrap-table-next";
import { tableTwoData, tableThreeData, tableOneData } from "./data";
import { tableThreeColumns, tableTwoColumns, tableOneColumns } from "./Column";
import DataTable from "../DataTable";
import "react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css";
import "react-bootstrap-table2-toolkit/dist/react-bootstrap-table2-toolkit.min.css";
#
How to use
<div className="card-body">
<ToolkitProvider
keyField="appName"
bootstrap4
data={dataTwo}
columns={columnsTwo}
>
{(props) => (
<React.Fragment>
<DataTable
{...props.baseProps}
hover={true}
bordered={false}
condensed={true}
key={"key2"}
pagination={paginationFactory({
hideSizePerPage: true,
hidePageListOnlyOnePage: false,
showTotal: true,
paginationTotalRenderer: customTotal,
})}
cellEdit={cellEditFactory({
mode: "click",
blurToSave: true,
})}
/>
</React.Fragment>
)}
</ToolkitProvider>
</div>