# 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>