reactstrap#PaginationItem JavaScript Examples

The following examples show how to use reactstrap#PaginationItem. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Pagenation.js    From relay_09 with MIT License 6 votes vote down vote up
Page = (props) => {
  return (
    <Pagination aria-label="Page navigation example">
      <PaginationItem>
        <PaginationLink first href="#" />
      </PaginationItem>
      <PaginationItem>
        <PaginationLink previous href="#" />
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#">1</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#">2</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#">3</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#">4</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink href="#">5</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationLink next href="#" />
      </PaginationItem>
      <PaginationItem>
        <PaginationLink last href="#" />
      </PaginationItem>
    </Pagination>
  );
}
Example #2
Source File: Tables.js    From covidsos with MIT License 6 votes vote down vote up
getNavigationPageNums(tableConfig) {
    const {currState} = this.state;
    const currTableState = currState[tableConfig.key];
    let startPage = Math.max(currTableState.currPage - 2, 1);
    let endPage = Math.min(startPage + 4, Math.ceil(
        currTableState.filteredData.length / tableConfig.pageSize));
    const dataToReturn = [];
    for (let i = startPage; i <= endPage; i++) {
      dataToReturn.push(
          <PaginationItem key={tableConfig.key + '_nav_' + i}
                          className={classnames({
                            active: currTableState.currPage === i
                          })}>
            <PaginationLink href="#" onClick={e => {
              currState[tableConfig.key].currPage = i;
              this.setState({currState: currState});
              e.preventDefault();
            }}>
              {i}
            </PaginationLink>
          </PaginationItem>);
    }
    return dataToReturn;
  }
Example #3
Source File: index.js    From gobench with Apache License 2.0 5 votes vote down vote up
render() {
    return (
      <div>
        <h5 className="mb-4">
          <strong>Default Pagination</strong>
        </h5>
        <div className="mb-5">
          <Pagination aria-label="Page navigation example">
            <PaginationItem>
              <PaginationLink first />
            </PaginationItem>
            <PaginationItem>
              <PaginationLink previous />
            </PaginationItem>
            <PaginationItem active>
              <PaginationLink>1</PaginationLink>
            </PaginationItem>
            <PaginationItem disabled>
              <PaginationLink>2</PaginationLink>
            </PaginationItem>
            <PaginationItem>
              <PaginationLink>3</PaginationLink>
            </PaginationItem>
            <PaginationItem>
              <PaginationLink>4</PaginationLink>
            </PaginationItem>
            <PaginationItem>
              <PaginationLink>5</PaginationLink>
            </PaginationItem>
            <PaginationItem>
              <PaginationLink next />
            </PaginationItem>
            <PaginationItem>
              <PaginationLink last />
            </PaginationItem>
          </Pagination>
        </div>
        <h5 className="mb-4">
          <strong>Sizing</strong>
        </h5>
        <div className="mb-5">
          <Pagination size="lg" aria-label="Page navigation example">
            <PaginationItem>
              <PaginationLink first />
            </PaginationItem>
            <PaginationItem>
              <PaginationLink previous />
            </PaginationItem>
            <PaginationItem>
              <PaginationLink>1</PaginationLink>
            </PaginationItem>
            <PaginationItem>
              <PaginationLink>2</PaginationLink>
            </PaginationItem>
            <PaginationItem>
              <PaginationLink>3</PaginationLink>
            </PaginationItem>
            <PaginationItem>
              <PaginationLink next />
            </PaginationItem>
            <PaginationItem>
              <PaginationLink last />
            </PaginationItem>
          </Pagination>
        </div>
      </div>
    )
  }
Example #4
Source File: Tables.js    From covidsos with MIT License 5 votes vote down vote up
getNavigation(tableConfig) {
    const {currState} = this.state;
    const currTableState = currState[tableConfig.key];
    return (
        <nav>
          <Pagination
              className="pagination justify-content-end mb-0"
              listClassName="justify-content-end mb-0">
            <PaginationItem className="disabled">
              <PaginationLink
                  href="#"
                  onClick={e => {
                    if (currTableState.currPage > 1) {
                      currState[tableConfig.key].currPage = currTableState.currPage - 1;
                      this.setState({currState: currState});
                    }
                    e.preventDefault();
                  }}>
                <i className="fas fa-angle-left"/>
                <span className="sr-only">Previous</span>
              </PaginationLink>
            </PaginationItem>
            {this.getNavigationPageNums(tableConfig)}

            <PaginationItem>
              <PaginationLink href="#" onClick={e => {
                if (currTableState.currPage < Math.ceil(
                    currTableState.filteredData.length / tableConfig.pageSize)) {
                  currState[tableConfig.key].currPage = currTableState.currPage + 1;
                  this.setState({currState: currState});
                }
                e.preventDefault();
              }}>
                <i className="fas fa-angle-right"/>
                <span className="sr-only">Next</span>
              </PaginationLink>
            </PaginationItem>
          </Pagination>
        </nav>
    );
  }
Example #5
Source File: Pagination.jsx    From nodejs-rest-api-boilerplate with MIT License 5 votes vote down vote up
render() {
    return (
      <>
        <Col lg="5">
          <h3 className="h4 text-success font-weight-bold mb-5">Pagination</h3>
          <nav aria-label="Page navigation example" className="mb-4">
            <Pagination>
              <PaginationItem>
                <PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
                  1
                </PaginationLink>
              </PaginationItem>
              <PaginationItem className="active">
                <PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
                  2
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
                  3
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
                  4
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
                  5
                </PaginationLink>
              </PaginationItem>
            </Pagination>
          </nav>
          <nav aria-label="Page navigation example">
            <Pagination>
              <PaginationItem>
                <PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
                  <i className="fa fa-angle-left" />
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
                  1
                </PaginationLink>
              </PaginationItem>
              <PaginationItem className="active">
                <PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
                  2
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
                  3
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
                  4
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
                  5
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink href="#pablo" onClick={e => e.preventDefault()}>
                  <i className="fa fa-angle-right" />
                </PaginationLink>
              </PaginationItem>
            </Pagination>
          </nav>
        </Col>
      </>
    );
  }
Example #6
Source File: SectionProgress.js    From Website2020 with MIT License 4 votes vote down vote up
// core components

function SectionProgress() {
  const [activeTab, setActiveTab] = React.useState("1");
  const toggle = tab => {
    if (activeTab !== tab) {
      setActiveTab(tab);
    }
  };
  return (
    <>
      <div className="section">
        <Container>
          <Row>
            <Col md="6">
              <div className="title">
                <h3>Progress Bar</h3>
                <br />
              </div>
              <Progress
                max="100"
                value="25"
                barClassName="progress-bar-success"
              />
              <br />
              <Progress max="100" value="50" barClassName="progress-bar-info" />
              <br />
              <Progress
                max="100"
                value="100"
                barClassName="progress-bar-danger"
              />
              <br />
              <Progress multi>
                <Progress bar max="100" value="15" />
                <Progress
                  bar
                  barClassName="progress-bar-success"
                  max="100"
                  value="30"
                />
                <Progress
                  bar
                  barClassName="progress-bar-warning"
                  max="100"
                  value="20"
                />
              </Progress>
            </Col>
            <Col md="6">
              <div className="title">
                <h3>Pagination</h3>
                <br />
              </div>
              <nav aria-label="Page navigation example">
                <Pagination>
                  <PaginationItem>
                    <PaginationLink
                      aria-label="Previous"
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      <i aria-hidden={true} className="fa fa-angle-left" />
                      <span className="sr-only">Previous</span>
                    </PaginationLink>
                  </PaginationItem>
                  <PaginationItem>
                    <PaginationLink
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      1
                    </PaginationLink>
                  </PaginationItem>
                  <PaginationItem>
                    <PaginationLink
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      2
                    </PaginationLink>
                  </PaginationItem>
                  <PaginationItem>
                    <PaginationLink
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      3
                    </PaginationLink>
                  </PaginationItem>
                  <PaginationItem>
                    <PaginationLink
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      4
                    </PaginationLink>
                  </PaginationItem>
                  <PaginationItem>
                    <PaginationLink
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      5
                    </PaginationLink>
                  </PaginationItem>
                  <PaginationItem>
                    <PaginationLink
                      aria-label="Next"
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      <i aria-hidden={true} className="fa fa-angle-right" />
                      <span className="sr-only">Next</span>
                    </PaginationLink>
                  </PaginationItem>
                </Pagination>
              </nav>
              <br />
              <nav aria-label="...">
                <Pagination>
                  <PaginationItem>
                    <PaginationLink
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                      tabIndex="-1"
                    >
                      Previous
                    </PaginationLink>
                  </PaginationItem>
                  <PaginationItem>
                    <PaginationLink
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      1
                    </PaginationLink>
                  </PaginationItem>
                  <PaginationItem>
                    <PaginationLink
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      2
                    </PaginationLink>
                  </PaginationItem>
                  <PaginationItem className="active">
                    <PaginationLink
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      3 <span className="sr-only">(current)</span>
                    </PaginationLink>
                  </PaginationItem>
                  <PaginationItem>
                    <PaginationLink
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      4
                    </PaginationLink>
                  </PaginationItem>
                  <PaginationItem>
                    <PaginationLink
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      5
                    </PaginationLink>
                  </PaginationItem>
                  <PaginationItem>
                    <PaginationLink
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      Next
                    </PaginationLink>
                  </PaginationItem>
                </Pagination>
              </nav>
            </Col>
          </Row>
          <br />
          <Row>
            <Col md="6">
              <div className="title">
                <h3>Navigation Tabs</h3>
              </div>
              <div className="nav-tabs-navigation">
                <div className="nav-tabs-wrapper">
                  <Nav id="tabs" role="tablist" tabs>
                    <NavItem>
                      <NavLink
                        className={activeTab === "1" ? "active" : ""}
                        onClick={() => {
                          toggle("1");
                        }}
                      >
                        Home
                      </NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink
                        className={activeTab === "2" ? "active" : ""}
                        onClick={() => {
                          toggle("2");
                        }}
                      >
                        Profile
                      </NavLink>
                    </NavItem>
                    <NavItem>
                      <NavLink
                        className={activeTab === "3" ? "active" : ""}
                        onClick={() => {
                          toggle("3");
                        }}
                      >
                        Messages
                      </NavLink>
                    </NavItem>
                  </Nav>
                </div>
              </div>
              <TabContent activeTab={activeTab} className="text-center">
                <TabPane tabId="1">
                  <p>
                    Larger, yet dramatically thinner. More powerful, but
                    remarkably power efficient. With a smooth metal surface that
                    seamlessly meets the new Retina HD display.
                  </p>
                </TabPane>
                <TabPane tabId="2">
                  <p>Here is your profile.</p>
                </TabPane>
                <TabPane tabId="3">
                  <p>Here are your messages.</p>
                </TabPane>
              </TabContent>
            </Col>
            <Col md="6">
              <div className="title">
                <h3>Labels</h3>
              </div>
              <label className="label label-default mr-1">Default</label>
              <label className="label label-primary mr-1">Primary</label>
              <label className="label label-info mr-1">Info</label>
              <label className="label label-success mr-1">Success</label>
              <label className="label label-warning mr-1">Warning</label>
              <label className="label label-danger">Danger</label>
            </Col>
          </Row>
        </Container>
      </div>{" "}
    </>
  );
}
Example #7
Source File: Tables.js    From sofia-react-template with MIT License 4 votes vote down vote up
Tables = function () {

  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [firstTable] = useState(mock.firstTable);
  const [secondTable] = useState(mock.secondTable);
  const [transactions, setTransactions] = useState(mock.transactionsWidget);
  const [tasks, setTasks] = useState(mock.tasksWidget);
  const [firstTableCurrentPage, setFirstTableCurrentPage] = useState(0);
  const [secondTableCurrentPage, setSecondTableCurrentPage] = useState(0);
  const [tableDropdownOpen, setTableMenuOpen] = useState(false);

  const pageSize = 4;
  const firstTablePagesCount = Math.ceil(firstTable.length / pageSize);
  const secondTablePagesCount = Math.ceil(secondTable.length / pageSize);

  const setFirstTablePage = (e, index) => {
    e.preventDefault();
    setFirstTableCurrentPage(index);
  }

  const setSecondTablePage = (e, index) => {
    e.preventDefault();
    setSecondTableCurrentPage(index);
  }

  const toggle = () => {
    setDropdownOpen(!dropdownOpen);
  }

  const transactionMenuOpen = (id) => {
    setTransactions(
      transactions.map( transaction => {
        if (transaction.id === id) {
          transaction.dropdownOpen = !transaction.dropdownOpen;
        }
        return transaction;
      })
    )
  }

  const tableMenuOpen = () => {
    setTableMenuOpen(!tableDropdownOpen);
  }

  const toggleTask = (id) => {
    setTasks(
      tasks.map( task => {
        if (task.id === id) {
          task.completed = !task.completed;
        }
        return task;
      })
    )
  }

  return (
    <div>
      <Row>
        <Col>
          <Row className="mb-4">
            <Col>
              <Widget>
                <div className={s.tableTitle}>
                  <div className="headline-2">States Colors</div>
                  <div className="d-flex">
                    <a href="/#"><img src={searchIcon} alt="Search"/></a>
                    <a href="/#"><img className="d-none d-sm-block" src={cloudIcon} alt="Cloud" /></a>
                    <a href="/#"><img src={printerIcon} alt="Printer" /></a>
                    <a href="/#"><img className="d-none d-sm-block" src={optionsIcon} alt="Options" /></a>
                    <a href="/#"><img src={funnelIcon} alt="Funnel" /></a>
                  </div>
                </div>
                <div className="widget-table-overflow">
                  <Table className={`table-striped table-borderless table-hover ${s.statesTable}`} responsive>
                    <thead>
                    <tr>
                      <th className={s.checkboxCol}>
                        <div className="checkbox checkbox-primary">
                          <input
                            className="styled"
                            id="checkbox100"
                            type="checkbox"
                          />
                          <label for="checkbox100"/>
                        </div>
                      </th>
                      <th className="w-25">NAME</th>
                      <th className="w-25">COMPANY</th>
                      <th className="w-25">CITY</th>
                      <th className="w-25">STATE</th>
                    </tr>
                    </thead>
                    <tbody>
                    {firstTable
                      .slice(
                        firstTableCurrentPage * pageSize,
                        (firstTableCurrentPage + 1) * pageSize
                      )
                      .map(item => (
                        <tr key={uuidv4()}>
                          <td>
                            <div className="checkbox checkbox-primary">
                              <input
                                id={item.id}
                                className="styled"
                                type="checkbox"
                              />
                              <Label for={item.id} />
                            </div>
                          </td>
                          <td className="d-flex align-items-center"><img className={s.image} src={item.img} alt="User"/><span className="ml-3">{item.name}</span></td>
                          <td>{item.company}</td>
                          <td>{item.city}</td>
                          <td>{item.state}</td>
                        </tr>
                      ))}
                    </tbody>
                  </Table>
                  <Pagination className="pagination-borderless" aria-label="Page navigation example">
                    <PaginationItem disabled={firstTableCurrentPage <= 0}>
                      <PaginationLink
                        onClick={e => setFirstTablePage(e, firstTableCurrentPage - 1)}
                        previous
                        href="#top"
                      />
                    </PaginationItem>
                    {[...Array(firstTablePagesCount)].map((page, i) =>
                      <PaginationItem active={i === firstTableCurrentPage} key={i}>
                        <PaginationLink onClick={e => setFirstTablePage(e, i)} href="#top">
                          {i + 1}
                        </PaginationLink>
                      </PaginationItem>
                    )}
                    <PaginationItem disabled={firstTableCurrentPage >= firstTablePagesCount - 1}>
                      <PaginationLink
                        onClick={e => setFirstTablePage(e, firstTableCurrentPage + 1)}
                        next
                        href="#top"
                      />
                    </PaginationItem>
                  </Pagination>
                </div>
              </Widget>
            </Col>
          </Row>
          <Row className="mb-4">
            <Col>
              <Widget>
                <div className={s.tableTitle}>
                  <div className="headline-2">Material UI table</div>
                  <Dropdown
                    className="d-none d-sm-block"
                    nav
                    isOpen={tableDropdownOpen}
                    toggle={() => tableMenuOpen()}
                  >
                    <DropdownToggle nav>
                      <img className="d-none d-sm-block" src={moreIcon} alt="More..."/>
                    </DropdownToggle>
                    <DropdownMenu >
                      <DropdownItem>
                        <div>Copy</div>
                      </DropdownItem>
                      <DropdownItem>
                        <div>Edit</div>
                      </DropdownItem>
                      <DropdownItem>
                        <div>Delete</div>
                      </DropdownItem>
                    </DropdownMenu>
                  </Dropdown>
                </div>
                <div className="widget-table-overflow">
                  <Table className="table-striped table-borderless table-hover" responsive>
                    <thead>
                    <tr>
                      <th>
                        <div className="checkbox checkbox-primary">
                          <input
                            id="checkbox200"
                            className="styled"
                            type="checkbox"
                          />
                          <label for="checkbox200"/>
                        </div>
                      </th>
                      <th className={s.nameCol}>NAME</th>
                      <th>EMAIL</th>
                      <th>PRODUCT</th>
                      <th>PRICE</th>
                      <th>DATE</th>
                      <th>CITY</th>
                      <th>STATUS</th>
                    </tr>
                    </thead>
                    <tbody>
                    {secondTable
                      .slice(
                        secondTableCurrentPage * pageSize,
                        (secondTableCurrentPage + 1) * pageSize
                      )
                      .map(item => (
                      <tr key={uuidv4()}>
                        <td>
                          <div className="checkbox checkbox-primary">
                            <input
                              id={item.id}
                              className="styled"
                              type="checkbox"
                            />
                            <label for={item.id} />
                          </div>
                        </td>
                        <td>{item.name}</td>
                        <td>{item.email}</td>
                        <td>{item.product}</td>
                        <td>{item.price}</td>
                        <td>{item.date}</td>
                        <td>{item.city}</td>
                        <td><Badge color={item.color}>{item.status}</Badge></td>
                      </tr>
                    ))}
                    </tbody>
                  </Table>
                  <Pagination className="pagination-with-border">
                    <PaginationItem disabled={secondTableCurrentPage <= 0}>
                      <PaginationLink
                        onClick={e => setSecondTablePage(e, secondTableCurrentPage - 1)}
                        previous
                        href="#top"
                      />
                    </PaginationItem>
                    {[...Array(secondTablePagesCount)].map((page, i) =>
                      <PaginationItem active={i === secondTableCurrentPage} key={i}>
                        <PaginationLink onClick={e => setSecondTablePage(e, i)} href="#top">
                          {i + 1}
                        </PaginationLink>
                      </PaginationItem>
                    )}
                    <PaginationItem disabled={secondTableCurrentPage >= secondTablePagesCount - 1}>
                      <PaginationLink
                        onClick={e => setSecondTablePage(e, secondTableCurrentPage + 1)}
                        next
                        href="#top"
                      />
                    </PaginationItem>
                  </Pagination>
                </div>
              </Widget>
            </Col>
          </Row>
          <Row>
            <Col xs={12} xl={8} className="pr-grid-col">
              <Widget>
                <div className={s.tableTitle}>
                  <div className="headline-2">Recent transaction</div>
                  <div>
                    <ButtonDropdown
                      isOpen={dropdownOpen}
                      toggle={toggle}
                      className=""
                    >
                      <DropdownToggle caret>
                        &nbsp; Weekly &nbsp;
                      </DropdownToggle>
                      <DropdownMenu>
                        <DropdownItem>Daily</DropdownItem>
                        <DropdownItem>Weekly</DropdownItem>
                        <DropdownItem>Monthly</DropdownItem>
                      </DropdownMenu>
                    </ButtonDropdown>
                    {/*<img src="" alt="Filter option"/>*/}
                  </div>
                </div>
                <div className={s.widgetContentBlock}>
                  {transactions.map(item => (
                    <div key={uuidv4()} className={s.content}>
                      <div><img src={item.icon} alt="Item" /><span className="body-2 ml-3">{item.category}</span></div>
                      <div className="body-3 muted d-none d-md-block">{item.date}</div>
                      <div className="body-2">{item.price}</div>
                      <div className="body-3 muted d-none d-lg-block">{item.description}</div>

                      <Dropdown
                        className="d-none d-sm-block"
                        nav
                        isOpen={item.dropdownOpen}
                        toggle={() => transactionMenuOpen(item.id)}
                      >
                        <DropdownToggle nav>
                          <img className="d-none d-sm-block" src={moreIcon} alt="More ..."/>
                        </DropdownToggle>
                        <DropdownMenu >
                          <DropdownItem>
                            <div>Copy</div>
                          </DropdownItem>
                          <DropdownItem>
                            <div>Edit</div>
                          </DropdownItem>
                          <DropdownItem>
                            <div>Delete</div>
                          </DropdownItem>
                        </DropdownMenu>
                      </Dropdown>
                    </div>
                  ))}
                </div>
              </Widget>
            </Col>
            <Col xs={12} xl={4} className="pl-grid-col mt-4 mt-xl-0">
              <Widget>
                <div className={s.tableTitle}>
                  <div className="headline-2">Tasks</div>
                </div>
                <div className={s.widgetContentBlock}>
                  <TaskContainer tasks={tasks} toggleTask={toggleTask} />
                </div>
              </Widget>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  )
}
Example #8
Source File: Products.js    From gedge-platform with Apache License 2.0 4 votes vote down vote up
render() {
        return (
            <React.Fragment>

                <div className="page-content">
                    <Container fluid>
                        <Breadcrumbs title="Products" breadcrumbItems={this.state.breadcrumbItems} />

                        <Detail />

                        <Row>

                            <Col xl={3} lg={4}>
                                <Card>
                                    <CardHeader className="bg-transparent border-bottom">
                                        <h5 className="mb-0">Filters</h5>
                                    </CardHeader>

                                    <CardBody>
                                        <h5 className="font-size-14 mb-3">Categories</h5>

                                        <div id="accordion" className="custom-accordion categories-accordion mb-3">
                                            <div className="categories-group-card">
                                                <Link to="#" onClick={() => this.setState({ electronic: !this.state.electronic, fashion: false, baby: false, fitness: false })} className={this.state.electronic ? "categories-group-list accordian-bg-products" : "categories-group-list"}>
                                                    <i className="mdi mdi-desktop-classic font-size-16 align-middle mr-2"></i> Electronic
                                                    <i className={this.state.electronic === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i>
                                                </Link>

                                                <Collapse isOpen={this.state.electronic} id="collapseOne">
                                                    <div>
                                                        <ul className="list-unstyled categories-list mb-0">
                                                            <li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Mobile</Link></li>
                                                            <li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Mobile accessories</Link></li>
                                                            <li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Computers</Link></li>
                                                            <li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Laptops</Link></li>
                                                            <li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Speakers</Link></li>
                                                        </ul>
                                                    </div>
                                                </Collapse>
                                            </div>

                                            <div className="categories-group-card">
                                                <Link to="#" className={this.state.fashion ? "categories-group-list accordian-bg-products" : "categories-group-list"} onClick={() => this.setState({ fashion: !this.state.fashion, electronic: false, baby: false, fitness: false })}>
                                                    <i className="mdi mdi-hanger font-size-16 align-middle mr-2"></i> Fashion
                                                    <i className={this.state.fashion === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i>
                                                </Link>
                                                <Collapse isOpen={this.state.fashion} id="collapseTwo">
                                                    <div>
                                                        <ul className="list-unstyled categories-list mb-0">
                                                            <li className="active"><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Clothing</Link></li>
                                                            <li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Footwear</Link></li>
                                                            <li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Watches</Link></li>
                                                            <li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Sportswear</Link></li>
                                                        </ul>
                                                    </div>
                                                </Collapse>
                                            </div>

                                            <div className="categories-group-card">
                                                <Link to="#" onClick={() => this.setState({ baby: !this.state.baby, fashion: false, electronic: false, fitness: false })} className={this.state.baby ? "categories-group-list accordian-bg-products" : "categories-group-list"} >
                                                    <i className="mdi mdi-pinwheel-outline font-size-16 align-middle mr-2"></i> Baby & Kids
                                                    <i className={this.state.baby === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i>
                                                </Link>
                                                <Collapse isOpen={this.state.baby} id="collapseThree">
                                                    <div>
                                                        <ul className="list-unstyled categories-list mb-0">
                                                            <li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Clothing</Link></li>
                                                            <li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Footwear</Link></li>
                                                            <li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Toys</Link></li>
                                                            <li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Baby care</Link></li>
                                                        </ul>
                                                    </div>
                                                </Collapse>
                                            </div>

                                            <div className="categories-group-card">
                                                <Link to="#" onClick={() => this.setState({ fitness: !this.state.fitness, fashion: false, baby: false, electronic: false })} className={this.state.fitness ? "categories-group-list accordian-bg-products" : "categories-group-list"}>
                                                    <i className="mdi mdi-dumbbell font-size-16 align-middle mr-2"></i> Fitness
                                                    <i className={this.state.fitness === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i>
                                                </Link>
                                                <Collapse isOpen={this.state.fitness} id="collapseFour">
                                                    <div>
                                                        <ul className="list-unstyled categories-list mb-0">
                                                            <li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Gym equipment</Link></li>
                                                            <li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Yoga mat</Link></li>
                                                            <li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Dumbbells</Link></li>
                                                            <li><Link to="#"><i className="mdi mdi-circle-medium mr-1"></i> Protein supplements</Link></li>
                                                        </ul>
                                                    </div>
                                                </Collapse>
                                            </div>
                                        </div>
                                    </CardBody>

                                    <CardBody className="border-top">
                                        <div>
                                            <h5 className="font-size-14 mb-4">Price</h5>
                                            <br />
                                            <Nouislider range={{ min: 0, max: 600 }} tooltips={true} start={[100, 500]} connect />
                                        </div>
                                    </CardBody>

                                    <div className="custom-accordion">
                                        <CardBody className="border-top">
                                            <div>
                                                <h5 className="font-size-14 mb-0"><Link to="#" className="text-dark d-block" onClick={() => this.setState({ discount: !this.state.discount })} >Discount <i className={this.state.discount === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i></Link></h5>

                                                <Collapse isOpen={this.state.discount} id="collapseExample1">

                                                    <div className="mt-4">
                                                        <div className="custom-control custom-radio mt-2">
                                                            <Input type="radio" id="productdiscountRadio6" name="productdiscountRadio1" className="custom-control-input" />
                                                            <Label className="custom-control-label" htmlFor="productdiscountRadio6">50% or more</Label>
                                                        </div>
                                                        <div className="custom-control custom-radio mt-2">
                                                            <Input type="radio" id="productdiscountRadio5" name="productdiscountRadio1" className="custom-control-input" />
                                                            <Label className="custom-control-label" htmlFor="productdiscountRadio5">40% or more</Label>
                                                        </div>
                                                        <div className="custom-control custom-radio mt-2">
                                                            <Input type="radio" id="productdiscountRadio4" name="productdiscountRadio1" className="custom-control-input" />
                                                            <Label className="custom-control-label" htmlFor="productdiscountRadio4">30% or more</Label>
                                                        </div>
                                                        <div className="custom-control custom-radio mt-2">
                                                            <Input type="radio" id="productdiscountRadio3" name="productdiscountRadio1" className="custom-control-input" />
                                                            <Label className="custom-control-label" htmlFor="productdiscountRadio3">20% or more</Label>
                                                        </div>
                                                        <div className="custom-control custom-radio mt-2">
                                                            <Input type="radio" id="productdiscountRadio2" name="productdiscountRadio1" className="custom-control-input" />
                                                            <Label className="custom-control-label" htmlFor="productdiscountRadio2">10% or more</Label>
                                                        </div>
                                                        <div className="custom-control custom-radio mt-2">
                                                            <Input type="radio" id="productdiscountRadio1" name="productdiscountRadio1" className="custom-control-input" />
                                                            <Label className="custom-control-label" htmlFor="productdiscountRadio1">Less than 10%</Label>
                                                        </div>
                                                    </div>

                                                </Collapse>
                                            </div>
                                        </CardBody>

                                        <CardBody className="border-top">
                                            <div>
                                                <h5 className="font-size-14 mb-0"><Link to="#" className="text-dark d-block" onClick={() => this.setState({ size: !this.state.size })}>Size <i className={this.state.size === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i></Link></h5>

                                                <Collapse isOpen={this.state.size} id="collapseExample2">

                                                    <div className="mt-4">
                                                        <div className="custom-control custom-radio mt-2">
                                                            <Input type="radio" id="productsizeRadio1" name="productsizeRadio" className="custom-control-input" />
                                                            <Label className="custom-control-label" htmlFor="productsizeRadio1">X-Large</Label>
                                                        </div>
                                                        <div className="custom-control custom-radio mt-2">
                                                            <Input type="radio" id="productsizeRadio2" name="productsizeRadio" className="custom-control-input" />
                                                            <Label className="custom-control-label" htmlFor="productsizeRadio2">Large</Label>
                                                        </div>
                                                        <div className="custom-control custom-radio mt-2">
                                                            <Input type="radio" id="productsizeRadio3" name="productsizeRadio" className="custom-control-input" />
                                                            <Label className="custom-control-label" htmlFor="productsizeRadio3">Medium</Label>
                                                        </div>
                                                        <div className="custom-control custom-radio mt-2">
                                                            <Input type="radio" id="productsizeRadio4" name="productsizeRadio" className="custom-control-input" />
                                                            <Label className="custom-control-label" htmlFor="productsizeRadio4">Small</Label>
                                                        </div>
                                                    </div>

                                                </Collapse>
                                            </div>
                                        </CardBody>
                                        <CardBody className="border-top">
                                            <div>
                                                <h5 className="font-size-14 mb-0"><Link to="#" className="collapsed text-dark d-block" onClick={() => this.setState({ rating: !this.state.rating })}>Customer Rating <i className={this.state.rating === true ? "mdi mdi-minus float-right accor-minus-icon" : "mdi mdi-plus float-right accor-plus-icon"}></i></Link></h5>

                                                <Collapse isOpen={this.state.rating} id="collapseExample3">

                                                    <div className="mt-4">
                                                        <div className="custom-control custom-radio mt-2">
                                                            <Input type="radio" id="productratingRadio1" name="productratingRadio1" className="custom-control-input" />
                                                            <Label className="custom-control-label" htmlFor="productratingRadio1">4 <i className="mdi mdi-star text-warning"></i>  & Above</Label>
                                                        </div>
                                                        <div className="custom-control custom-radio mt-2">
                                                            <Input type="radio" id="productratingRadio2" name="productratingRadio1" className="custom-control-input" />
                                                            <Label className="custom-control-label" htmlFor="productratingRadio2">3 <i className="mdi mdi-star text-warning"></i>  & Above</Label>
                                                        </div>
                                                        <div className="custom-control custom-radio mt-2">
                                                            <Input type="radio" id="productratingRadio3" name="productratingRadio1" className="custom-control-input" />
                                                            <Label className="custom-control-label" htmlFor="productratingRadio3">2 <i className="mdi mdi-star text-warning"></i>  & Above</Label>
                                                        </div>
                                                        <div className="custom-control custom-radio mt-2">
                                                            <Input type="radio" id="productratingRadio4" name="productratingRadio1" className="custom-control-input" />
                                                            <Label className="custom-control-label" htmlFor="productratingRadio4">1 <i className="mdi mdi-star text-warning"></i></Label>
                                                        </div>
                                                    </div>

                                                </Collapse>
                                            </div>
                                        </CardBody>
                                    </div>
                                </Card>
                            </Col>
                            <Col lg={9}>
                                <Card>
                                    <CardBody>
                                        <div>
                                            <Row>
                                                <Col md={6}>
                                                    <div>
                                                        <h5>Clothes & Accessories</h5>
                                                        <Breadcrumb listClassName="p-0 bg-transparent mb-2">
                                                            <BreadcrumbItem ><Link to="#">Fashion</Link></BreadcrumbItem>
                                                            <BreadcrumbItem ><Link to="#">Clothing</Link></BreadcrumbItem >
                                                            <BreadcrumbItem active>T-shirts</BreadcrumbItem >
                                                        </Breadcrumb>
                                                    </div>
                                                </Col>

                                                <Col md={6}>
                                                    <div className="form-inline float-md-right">
                                                        <div className="search-box ml-2">
                                                            <div className="position-relative">
                                                                <Input type="text" className="form-control rounded" placeholder="Search..." />
                                                                <i className="mdi mdi-magnify search-icon"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </Col>

                                            </Row>

                                            <ul className="list-inline my-3 ecommerce-sortby-list">
                                                <li className="list-inline-item"><span className="font-weight-medium font-family-secondary">Sort by:</span></li>
                                                <li className="list-inline-item active ml-1"><Link to="#">Popularity</Link></li>
                                                <li className="list-inline-item ml-1"><Link to="#">Newest</Link></li>
                                                <li className="list-inline-item ml-1"><Link to="#">Discount</Link></li>
                                            </ul>

                                            <Row className="no-gutters">
                                                <Col xl={4} sm={6}>
                                                    <div className="product-box">
                                                        <div className="product-img">
                                                            <div className="product-ribbon badge badge-warning">
                                                                Trending
                                                            </div>
                                                            <div className="product-like">
                                                                <Link to="#">
                                                                    <i className="mdi mdi-heart-outline"></i>
                                                                </Link>
                                                            </div>
                                                            <img src={product1} alt="" className="img-fluid mx-auto d-block" />
                                                        </div>

                                                        <div className="text-center">
                                                            <p className="font-size-12 mb-1">Blue color, T-shirt</p>
                                                            <h5 className="font-size-15"><Link to="#" className="text-dark">Full sleeve T-shirt</Link></h5>

                                                            <h5 className="mt-3 mb-0">$240</h5>
                                                        </div>
                                                    </div>
                                                </Col>


                                                <Col xl={4} sm={6}>
                                                    <div className="product-box">
                                                        <div className="product-img">
                                                            <div className="product-ribbon badge badge-primary">
                                                                - 25 %
                                                            </div>
                                                            <div className="product-like">
                                                                <Link to="#">
                                                                    <i className="mdi mdi-heart-outline"></i>
                                                                </Link>
                                                            </div>
                                                            <img src={product2} alt="" className="img-fluid mx-auto d-block" />
                                                        </div>

                                                        <div className="text-center">
                                                            <p className="font-size-12 mb-1">Half sleeve, T-shirt</p>
                                                            <h5 className="font-size-15"><Link to="#" className="text-dark">Half sleeve T-shirt </Link></h5>

                                                            <h5 className="mt-3 mb-0"><span className="text-muted mr-2"><del>$240</del></span>$225</h5>
                                                        </div>
                                                    </div>
                                                </Col>
                                                <Col xl={4} sm={6}>
                                                    <div className="product-box">
                                                        <div className="product-img">
                                                            <div className="product-like">
                                                                <Link to="#">
                                                                    <i className="mdi mdi-heart text-danger"></i>
                                                                </Link>
                                                            </div>
                                                            <img src={product3} alt="" className="img-fluid mx-auto d-block" />
                                                        </div>

                                                        <div className="text-center">
                                                            <p className="font-size-12 mb-1">Green color, Hoodie</p>
                                                            <h5 className="font-size-15"><Link to="#" className="text-dark">Hoodie (Green)</Link></h5>

                                                            <h5 className="mt-3 mb-0"><span className="text-muted mr-2"><del>$290</del></span>$275</h5>
                                                        </div>
                                                    </div>
                                                </Col>
                                                <Col xl={4} sm={6}>
                                                    <div className="product-box">
                                                        <div className="product-img">
                                                            <div className="product-like">
                                                                <Link to="#">
                                                                    <i className="mdi mdi-heart-outline"></i>
                                                                </Link>
                                                            </div>
                                                            <img src={product4} alt="" className="img-fluid mx-auto d-block" />
                                                        </div>

                                                        <div className="text-center">
                                                            <p className="font-size-12 mb-1">Gray color, Hoodie</p>
                                                            <h5 className="font-size-15"><Link to="#" className="text-dark">Hoodie (Green)</Link></h5>

                                                            <h5 className="mt-3 mb-0"><span className="text-muted mr-2"><del>$290</del></span>$275</h5>
                                                        </div>
                                                    </div>
                                                </Col>

                                                <Col xl={4} sm={6}>
                                                    <div className="product-box">
                                                        <div className="product-img">
                                                            <div className="product-like">
                                                                <Link to="#">
                                                                    <i className="mdi mdi-heart text-danger"></i>
                                                                </Link>
                                                            </div>
                                                            <img src={product5} alt="" className="img-fluid mx-auto d-block" />
                                                        </div>

                                                        <div className="text-center">
                                                            <p className="font-size-12 mb-1">Blue color, T-shirt</p>
                                                            <h5 className="font-size-15"><Link to="#" className="text-dark">Full sleeve T-shirt</Link></h5>

                                                            <h5 className="mt-3 mb-0">$242</h5>
                                                        </div>
                                                    </div>
                                                </Col>
                                                <Col xl={4} sm={6}>
                                                    <div className="product-box">
                                                        <div className="product-img">
                                                            <div className="product-ribbon badge badge-primary">
                                                                - 22 %
                                                            </div>
                                                            <div className="product-like">
                                                                <Link to="#">
                                                                    <i className="mdi mdi-heart-outline"></i>
                                                                </Link>
                                                            </div>
                                                            <img src={product6} alt="" className="img-fluid mx-auto d-block" />

                                                        </div>

                                                        <div className="text-center">
                                                            <p className="font-size-12 mb-1">Black color, T-shirt</p>
                                                            <h5 className="font-size-15"><Link to="#" className="text-dark">Half sleeve T-shirt </Link></h5>

                                                            <h5 className="mt-3 mb-0"><span className="text-muted mr-2"><del>$240</del></span>$225</h5>
                                                        </div>
                                                    </div>
                                                </Col>
                                            </Row>

                                            <Row className="mt-4">
                                                <Col sm={6}>
                                                    <div>
                                                        <p className="mb-sm-0 mt-2">Page <span className="font-weight-bold">2</span> Of <span className="font-weight-bold">113</span></p>
                                                    </div>
                                                </Col>
                                                <Col sm={6}>
                                                    <div className="float-sm-right">
                                                        <Pagination className="pagination-rounded mb-sm-0">
                                                            <PaginationItem disabled>
                                                                <PaginationLink href="#" ><i className="mdi mdi-chevron-left"></i></PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem>
                                                                <PaginationLink href="#" >1</PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem active>
                                                                <PaginationLink href="#" >2</PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem>
                                                                <PaginationLink href="#" >3</PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem>
                                                                <PaginationLink hrefo="#" >4</PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem>
                                                                <PaginationLink href="#" >5</PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem>
                                                                <PaginationLink href="#" ><i className="mdi mdi-chevron-right"></i></PaginationLink>
                                                            </PaginationItem>
                                                        </Pagination>
                                                    </div>
                                                </Col>
                                            </Row>
                                        </div>
                                    </CardBody>
                                </Card>
                            </Col>
                        </Row>


                    </Container>
                </div>
            </React.Fragment>
        );
    }
Example #9
Source File: Pagnations.js    From id.co.moonlay-eworkplace-admin-web with MIT License 4 votes vote down vote up
render() {
    return (
      <div className="animated fadeIn">
        <Card>
          <CardHeader>
            <i className="fa fa-align-justify"></i><strong>Pagination</strong>
            <div className="card-header-actions">
              <a href="https://reactstrap.github.io/components/pagination/" rel="noreferrer noopener" target="_blank" className="card-header-action">
                <small className="text-muted">docs</small>
              </a>
            </div>
          </CardHeader>
          <CardBody>
            <Pagination>
              <PaginationItem>
                <PaginationLink previous tag="button" />
              </PaginationItem>
              <PaginationItem>
                <PaginationLink tag="button">
                  1
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink tag="button">
                  2
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink tag="button">
                  3
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink tag="button">
                  4
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink tag="button">
                  5
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink next tag="button" />
              </PaginationItem>
            </Pagination>
          </CardBody>
        </Card>
        <Card>
          <CardHeader>
            <i className="fa fa-align-justify"></i><strong>Pagination</strong>
            <small> disabled and active states</small>
          </CardHeader>
          <CardBody>
            <Pagination>
              <PaginationItem disabled>
                <PaginationLink previous tag="button" />
              </PaginationItem>
              <PaginationItem active>
                <PaginationLink tag="button">
                  1
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink tag="button">
                  2
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink tag="button">
                  3
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink tag="button">
                  4
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink tag="button">
                  5
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink next tag="button" />
              </PaginationItem>
            </Pagination>
          </CardBody>
        </Card>
        <Card>
          <CardHeader>
            <i className="fa fa-align-justify"></i><strong>Pagination</strong>
            <small> sizing</small>
          </CardHeader>
          <CardBody>
            <Pagination size="lg">
              <PaginationItem>
                <PaginationLink previous tag="button" />
              </PaginationItem>
              <PaginationItem>
                <PaginationLink tag="button">
                  1
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink tag="button">
                  2
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink tag="button">
                  3
                </PaginationLink>
              </PaginationItem>
              <PaginationItem className="d-none d-sm-block">
                <PaginationLink next tag="button" />
              </PaginationItem>
            </Pagination>
            <Pagination>
              <PaginationItem>
                <PaginationLink previous tag="button" />
              </PaginationItem>
              <PaginationItem>
                <PaginationLink tag="button">
                  1
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink tag="button">
                  2
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink tag="button">
                  3
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink next tag="button" />
              </PaginationItem>
            </Pagination>
            <Pagination size="sm">
              <PaginationItem>
                <PaginationLink previous tag="button" />
              </PaginationItem>
              <PaginationItem>
                <PaginationLink tag="button">
                  1
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink tag="button">
                  2
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink tag="button">
                  3
                </PaginationLink>
              </PaginationItem>
              <PaginationItem>
                <PaginationLink next tag="button" />
              </PaginationItem>
            </Pagination>
          </CardBody>
        </Card>
      </div>
    );
  }
Example #10
Source File: Tables.js    From id.co.moonlay-eworkplace-admin-web with MIT License 4 votes vote down vote up
render() {
    return (
      <div className="animated fadeIn">
        <Row>
          <Col xs="12" lg="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i> Simple Table
              </CardHeader>
              <CardBody>
                <Table responsive>
                  <thead>
                  <tr>
                    <th>Username</th>
                    <th>Date registered</th>
                    <th>Role</th>
                    <th>Status</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>Samppa Nori</td>
                    <td>2012/01/01</td>
                    <td>Member</td>
                    <td>
                      <Badge color="success">Active</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Estavan Lykos</td>
                    <td>2012/02/01</td>
                    <td>Staff</td>
                    <td>
                      <Badge color="danger">Banned</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Chetan Mohamed</td>
                    <td>2012/02/01</td>
                    <td>Admin</td>
                    <td>
                      <Badge color="secondary">Inactive</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Derick Maximinus</td>
                    <td>2012/03/01</td>
                    <td>Member</td>
                    <td>
                      <Badge color="warning">Pending</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Friderik Dávid</td>
                    <td>2012/01/21</td>
                    <td>Staff</td>
                    <td>
                      <Badge color="success">Active</Badge>
                    </td>
                  </tr>
                  </tbody>
                </Table>
                <Pagination>
                  <PaginationItem>
                    <PaginationLink previous tag="button"></PaginationLink>
                  </PaginationItem>
                  <PaginationItem active>
                    <PaginationLink tag="button">1</PaginationLink>
                  </PaginationItem>
                  <PaginationItem>
                    <PaginationLink tag="button">2</PaginationLink>
                  </PaginationItem>
                  <PaginationItem>
                    <PaginationLink tag="button">3</PaginationLink>
                  </PaginationItem>
                  <PaginationItem>
                    <PaginationLink tag="button">4</PaginationLink>
                  </PaginationItem>
                  <PaginationItem>
                    <PaginationLink next tag="button"></PaginationLink>
                  </PaginationItem>
                </Pagination>
              </CardBody>
            </Card>
          </Col>

          <Col xs="12" lg="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i> Striped Table
              </CardHeader>
              <CardBody>
                <Table responsive striped>
                  <thead>
                  <tr>
                    <th>Username</th>
                    <th>Date registered</th>
                    <th>Role</th>
                    <th>Status</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>Yiorgos Avraamu</td>
                    <td>2012/01/01</td>
                    <td>Member</td>
                    <td>
                      <Badge color="success">Active</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Avram Tarasios</td>
                    <td>2012/02/01</td>
                    <td>Staff</td>
                    <td>
                      <Badge color="danger">Banned</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Quintin Ed</td>
                    <td>2012/02/01</td>
                    <td>Admin</td>
                    <td>
                      <Badge color="secondary">Inactive</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Enéas Kwadwo</td>
                    <td>2012/03/01</td>
                    <td>Member</td>
                    <td>
                      <Badge color="warning">Pending</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Agapetus Tadeáš</td>
                    <td>2012/01/21</td>
                    <td>Staff</td>
                    <td>
                      <Badge color="success">Active</Badge>
                    </td>
                  </tr>
                  </tbody>
                </Table>
                <Pagination>
                  <PaginationItem disabled><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
                  <PaginationItem active>
                    <PaginationLink tag="button">1</PaginationLink>
                  </PaginationItem>
                  <PaginationItem><PaginationLink tag="button">2</PaginationLink></PaginationItem>
                  <PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
                  <PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
                  <PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
                </Pagination>
              </CardBody>
            </Card>
          </Col>
        </Row>

        <Row>

          <Col xs="12" lg="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i> Condensed Table
              </CardHeader>
              <CardBody>
                <Table responsive size="sm">
                  <thead>
                  <tr>
                    <th>Username</th>
                    <th>Date registered</th>
                    <th>Role</th>
                    <th>Status</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>Carwyn Fachtna</td>
                    <td>2012/01/01</td>
                    <td>Member</td>
                    <td>
                      <Badge color="success">Active</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Nehemiah Tatius</td>
                    <td>2012/02/01</td>
                    <td>Staff</td>
                    <td>
                      <Badge color="danger">Banned</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Ebbe Gemariah</td>
                    <td>2012/02/01</td>
                    <td>Admin</td>
                    <td>
                      <Badge color="secondary">Inactive</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Eustorgios Amulius</td>
                    <td>2012/03/01</td>
                    <td>Member</td>
                    <td>
                      <Badge color="warning">Pending</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Leopold Gáspár</td>
                    <td>2012/01/21</td>
                    <td>Staff</td>
                    <td>
                      <Badge color="success">Active</Badge>
                    </td>
                  </tr>
                  </tbody>
                </Table>
                <Pagination>
                  <PaginationItem><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
                  <PaginationItem active>
                    <PaginationLink tag="button">1</PaginationLink>
                  </PaginationItem>
                  <PaginationItem><PaginationLink tag="button">2</PaginationLink></PaginationItem>
                  <PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
                  <PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
                  <PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
                </Pagination>
              </CardBody>
            </Card>
          </Col>

          <Col xs="12" lg="6">
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i> Bordered Table
              </CardHeader>
              <CardBody>
                <Table responsive bordered>
                  <thead>
                  <tr>
                    <th>Username</th>
                    <th>Date registered</th>
                    <th>Role</th>
                    <th>Status</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>Pompeius René</td>
                    <td>2012/01/01</td>
                    <td>Member</td>
                    <td>
                      <Badge color="success">Active</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Paĉjo Jadon</td>
                    <td>2012/02/01</td>
                    <td>Staff</td>
                    <td>
                      <Badge color="danger">Banned</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Micheal Mercurius</td>
                    <td>2012/02/01</td>
                    <td>Admin</td>
                    <td>
                      <Badge color="secondary">Inactive</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Ganesha Dubhghall</td>
                    <td>2012/03/01</td>
                    <td>Member</td>
                    <td>
                      <Badge color="warning">Pending</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Hiroto Šimun</td>
                    <td>2012/01/21</td>
                    <td>Staff</td>
                    <td>
                      <Badge color="success">Active</Badge>
                    </td>
                  </tr>
                  </tbody>
                </Table>
                <Pagination>
                  <PaginationItem><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
                  <PaginationItem active>
                    <PaginationLink tag="button">1</PaginationLink>
                  </PaginationItem>
                  <PaginationItem className="page-item"><PaginationLink tag="button">2</PaginationLink></PaginationItem>
                  <PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
                  <PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
                  <PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
                </Pagination>
              </CardBody>
            </Card>
          </Col>

        </Row>

        <Row>
          <Col>
            <Card>
              <CardHeader>
                <i className="fa fa-align-justify"></i> Combined All Table
              </CardHeader>
              <CardBody>
                <Table hover bordered striped responsive size="sm">
                  <thead>
                  <tr>
                    <th>Username</th>
                    <th>Date registered</th>
                    <th>Role</th>
                    <th>Status</th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                    <td>Vishnu Serghei</td>
                    <td>2012/01/01</td>
                    <td>Member</td>
                    <td>
                      <Badge color="success">Active</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Zbyněk Phoibos</td>
                    <td>2012/02/01</td>
                    <td>Staff</td>
                    <td>
                      <Badge color="danger">Banned</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Einar Randall</td>
                    <td>2012/02/01</td>
                    <td>Admin</td>
                    <td>
                      <Badge color="secondary">Inactive</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Félix Troels</td>
                    <td>2012/03/01</td>
                    <td>Member</td>
                    <td>
                      <Badge color="warning">Pending</Badge>
                    </td>
                  </tr>
                  <tr>
                    <td>Aulus Agmundr</td>
                    <td>2012/01/21</td>
                    <td>Staff</td>
                    <td>
                      <Badge color="success">Active</Badge>
                    </td>
                  </tr>
                  </tbody>
                </Table>
                <nav>
                  <Pagination>
                    <PaginationItem><PaginationLink previous tag="button">Prev</PaginationLink></PaginationItem>
                    <PaginationItem active>
                      <PaginationLink tag="button">1</PaginationLink>
                    </PaginationItem>
                    <PaginationItem><PaginationLink tag="button">2</PaginationLink></PaginationItem>
                    <PaginationItem><PaginationLink tag="button">3</PaginationLink></PaginationItem>
                    <PaginationItem><PaginationLink tag="button">4</PaginationLink></PaginationItem>
                    <PaginationItem><PaginationLink next tag="button">Next</PaginationLink></PaginationItem>
                  </Pagination>
                </nav>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </div>

    );
  }
Example #11
Source File: UiGeneral.js    From gedge-platform with Apache License 2.0 3 votes vote down vote up
render() {
        return (
            <React.Fragment>
                <div className="page-content">
                    <Container fluid>

                    <Breadcrumbs title="General" breadcrumbItems={this.state.breadcrumbItems} />
                    <Row>
                            <Col lg={12}>
                                <Card>
                                    <CardBody>
                                        <Row>
                                            <Col lg={6}>
                                                <div>
                                                    <h4 className="card-title">Badges</h4>
                                                    <p className="card-title-desc">Add any of the below mentioned modifier classes to change the appearance of a badge.</p>
                                                    <div>
                                                        <Badge color="primary" className="mr-1">Primary</Badge>
                                                        <Badge color="success" className="mr-1">Success</Badge>
                                                        <Badge color="info" className="mr-1">Info</Badge>
                                                        <Badge color="warning" className="mr-1">Warning</Badge>
                                                        <Badge color="danger" className="mr-1">Danger</Badge>
                                                        <Badge color="dark" className="mr-1">Dark</Badge>
                                                    </div>

                                                    <div className="mt-1">
                                                        <Badge className="badge-soft-primary mr-1">Primary</Badge>
                                                        <Badge className="badge-soft-success mr-1">Success</Badge>
                                                        <Badge className="badge-soft-info mr-1">Info</Badge>
                                                        <Badge className="badge-soft-warning mr-1">Warning</Badge>
                                                        <Badge className="badge-soft-danger mr-1">Danger</Badge>
                                                        <Badge className="badge-soft-dark mr-1">Dark</Badge>
                                                    </div>
                                                </div>
                                            </Col>
                                            <Col lg={6}>
                                                <div className="mt-4 mt-lg-0">
                                                    <h4 className="card-title">Pill badges</h4>
                                                    <p className="card-title-desc">Use the <code>.badge-pill</code> modifier class to make
                                                    badges more rounded (with a larger <code>border-radius</code>
                                                    and additional horizontal <code>padding</code>).
                                                    Useful if you miss the badges from v3.</p>
        
                                                    <div>
                                                        <Badge color="primary" pill className="mr-1">Primary</Badge>
                                                        <Badge color="success" pill className="mr-1">Success</Badge>
                                                        <Badge color="info" pill className="mr-1">Info</Badge>
                                                        <Badge color="warning" pill className="mr-1">Warning</Badge>
                                                        <Badge color="danger" pill className="mr-1">Danger</Badge>
                                                        <Badge color="dark" pill className="mr-1">Dark</Badge>
                                                    </div>

                                                    <div className="mt-1">
                                                        <Badge pill className="badge-soft-primary mr-1">Primary</Badge>
                                                        <Badge pill className="badge-soft-success mr-1">Success</Badge>
                                                        <Badge pill className="badge-soft-info mr-1">Info</Badge>
                                                        <Badge pill className="badge-soft-warning mr-1">Warning</Badge>
                                                        <Badge pill className="badge-soft-danger mr-1">Danger</Badge>
                                                        <Badge pill className="badge-soft-dark mr-1">Dark</Badge>
                                                    </div>
                                                </div>
                                            </Col>
                                        </Row>
                                       
                                    </CardBody>
                                </Card>
                                
                            </Col>
                        </Row>
                       
        
                        <Row>
                            <Col lg={6}>
                                <Card>
                                    <CardBody>
        
                                        <h4 className="card-title">Popovers</h4>
                                        <p className="card-title-desc">Add small overlay content, like those found in iOS, to any element for housing secondary information.</p>
        
                                        <div className="button-items">
                                            <Button type="button" color="light" id="Popovertop"  className="waves-effect mr-1" >
                                                Popover on top
                                            </Button>
                                            <Popover placement="top" isOpen={this.state.popovertop} target="Popovertop" toggle={this.toggletop}>
                                                <PopoverHeader>Popover Title</PopoverHeader>
                                                <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
                                            </Popover>
            
                                            <Button type="button"  id="Popoverright"  color="light" className="waves-effect mr-1">
                                                Popover on right
                                            </Button>
                                            <Popover placement="right" isOpen={this.state.popoverright} target="Popoverright" toggle={this.toggleright}>
                                                <PopoverHeader>Popover Title</PopoverHeader>
                                                <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
                                            </Popover>
            
                                            <Button type="button" id="Popoverbottom" color="light" className="waves-effect mr-1">
                                                Popover on bottom
                                            </Button>
                                            <Popover placement="bottom" isOpen={this.state.popoverbottom} target="Popoverbottom" toggle={this.togglebottom}>
                                                <PopoverHeader>Popover Title</PopoverHeader>
                                                <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
                                            </Popover> 
            
                                            <Button type="button"  id="Popoverleft" color="light" className="waves-effect mr-1">
                                                Popover on left
                                            </Button>
                                            <Popover placement="left" isOpen={this.state.popoverleft} target="Popoverleft" toggle={this.toggleleft}>
                                                <PopoverHeader>Popover Title</PopoverHeader>
                                                <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
                                            </Popover>
            
                                            <Button type="button" color="success" id="popover5" className="waves-effect waves-light">Dismissible popover</Button>
                                            <UncontrolledPopover trigger="focus" target="popover5" placement="right">
                                                <PopoverHeader>
                                                    Dismissible popover
                                                </PopoverHeader>
                                                <PopoverBody>
                                                    Vivamus sagittis lacus vel augue laoreet rutrum faucibus
                                                </PopoverBody>
                                            </UncontrolledPopover>
                                        </div>
        
                                    </CardBody>
                                </Card>
        
                            </Col>
        
                            <Col lg={6}>
                                <Card>
                                    <CardBody>
        
                                        <h4 className="card-title">Tooltips</h4>
                                        <p className="card-title-desc">Hover over the links below to see tooltips:</p>
        
                                        <div className="button-items">
                                            <Tooltip placement="top" isOpen={this.state.tttop} target="TooltipTop" toggle={() => this.setState({ tttop: !this.state.tttop })}>Hello world!</Tooltip>
                                            <Tooltip placement="right" isOpen={this.state.ttright} target="TooltipRight" toggle={() => this.setState({ ttright: !this.state.ttright })}>Hello world!</Tooltip>
                                            <Tooltip placement="bottom" isOpen={this.state.ttbottom} target="TooltipBottom" toggle={() => this.setState({ ttbottom: !this.state.ttbottom })}>Hello world!</Tooltip>
                                            <Tooltip placement="left" isOpen={this.state.ttleft} target="TooltipLeft" toggle={() => this.setState({ ttleft: !this.state.ttleft })}>Hello world!</Tooltip>

                                            <Button type="button" color="primary" className="mr-1" id="TooltipTop"> Tooltip on top</Button>
                                            <Button type="button" color="primary" className="mr-1" id="TooltipRight"> Tooltip on Right</Button>
                                            <Button type="button" color="primary" className="mr-1" id="TooltipBottom"> Tooltip on Bottom</Button>
                                            <Button type="button" color="primary" className="mr-1" id="TooltipLeft"> Tooltip on Left</Button>
                                            
                                        </div>
                                        
                                    </CardBody>
                                </Card>
        
                            </Col>
                        </Row>
                       
        
                        <Row>
                            <Col lg={12}>
                                <Card>
                                    <CardBody>
                                        <h4 className="card-title mb-4">Pagination</h4>
        
                                        <Row>
                                            <Col lg={6}>
                                                <h5 className="font-size-14">Default Example</h5>
                                                <p className="card-title-desc">Pagination links indicate a series of related content exists across multiple pages.</p>
        
                                                
                                                    <Pagination aria-label="Page navigation example">
                                                        <PaginationItem><PaginationLink href="#">Previous</PaginationLink></PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">Next</PaginationLink></PaginationItem>
                                                    </Pagination>
                                                
                
                                                
                                                    <Pagination aria-label="Page navigation example">
                                                        <PaginationItem>
                                                            <PaginationLink href="#" previous>
                                                                <i className="mdi mdi-chevron-left"></i>
                                                            </PaginationLink>
                                                        </PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                        <PaginationItem>
                                                            <PaginationLink next>
                                                                <i className="mdi mdi-chevron-right"></i>
                                                            </PaginationLink>
                                                        </PaginationItem>
                                                    </Pagination>
                                                
            
                                            </Col>
        
                                            <Col lg={6}>
                                                <div className="mt-4 mt-lg-0">
                                                    <h5 className="font-size-14">Disabled and active states</h5>
                                                    <p className="card-title-desc">Pagination links are customizable for
                                                            different circumstances. Use <code>.disabled</code> for links that appear
                                                            un-clickable and <code>.active</code> to
                                                            indicate the current page.</p>
                
            
                                                    
                                                        <Pagination aria-label="Page navigation example">
                                                            <PaginationItem disabled>
                                                                <PaginationLink href="#" tabIndex="-1">Previous</PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                            <PaginationItem active>
                                                                <PaginationLink href="#">2 <span className="sr-only">(current)</span></PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                            <PaginationItem>
                                                                <PaginationLink href="#">Next</PaginationLink>
                                                            </PaginationItem>
                                                        </Pagination>
                    
                                                    
                                                        <Pagination aria-label="Page navigation example">
                                                            <PaginationItem disabled>
                                                                <PaginationLink><i className="mdi mdi-chevron-left"></i></PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                            <PaginationItem active>
                                                                <PaginationLink>
                                                                    2
                                                                    <span className="sr-only">(current)</span>
                                                                </PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                            <PaginationItem>
                                                                <PaginationLink href="#"><i className="mdi mdi-chevron-right"></i></PaginationLink>
                                                            </PaginationItem>
                                                        </Pagination>
                                                </div>
                                            </Col>
                                        </Row>
                                       
        
                                        <Row>
                                            <Col lg={6}>
                                                <div className="mt-4">
                                                    <h5 className="font-size-14">Sizing</h5>
                                                    <p className="card-title-desc">Fancy larger or smaller pagination? Add <code>.pagination-lg</code> or <code>.pagination-sm</code> for additional
                                                            sizes.</p>
                
                                                    
                                                        <Pagination size="lg" aria-label="Page navigation example">
                                                            <PaginationItem disabled>
                                                                <PaginationLink href="#" tabIndex="-1">Previous</PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                            <PaginationItem>
                                                                <PaginationLink href="#">Next</PaginationLink>
                                                            </PaginationItem>
                                                        </Pagination>
                    
                                                    
                                                        <Pagination size="sm" aria-label="Page navigation example">
                                                            <PaginationItem disabled>
                                                                <PaginationLink href="#" tabIndex="-1">Previous</PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                            <PaginationItem>
                                                                <PaginationLink href="#">Next</PaginationLink>
                                                            </PaginationItem>
                                                        </Pagination>
                                                </div>
                    
                                            </Col>
        
                                            <Col lg={6}>
                                                <div className="mt-4">
                                                    <h5 className="card-title">Alignment</h5>
                                                    <p className="card-title-desc">Change the alignment of pagination
                                                            components with flexbox utilities.</p>
                
                                                    
                                                        <Pagination aria-label="Page navigation example" listClassName="justify-content-center">
                                                            <PaginationItem disabled>
                                                                <PaginationLink href="#" tabIndex="-1">Previous</PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                            <PaginationItem>
                                                                <PaginationLink href="#">Next</PaginationLink>
                                                            </PaginationItem>
                                                        </Pagination>
                    
                                                    
                                                        <Pagination aria-label="Page navigation example" listClassName="justify-content-end">
                                                            <PaginationItem disabled>
                                                                <PaginationLink href="#" tabIndex="-1">Previous</PaginationLink>
                                                            </PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem>
                                                            <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                            <PaginationItem>
                                                                <PaginationLink href="#">Next</PaginationLink>
                                                            </PaginationItem>
                                                        </Pagination>
                                                    
                                                </div>
                                            </Col>
                                        </Row>
                                       

                                        <Row className=" mt-4">
                                            <Col lg={6}>
                                                <h5 className="font-size-14">Rounded Example</h5>
                                                <p className="card-title-desc">Add <code>.pagination-rounded</code> for rounded pagination.</p>
        
                                                
                                                    <Pagination aria-label="Page navigation example" className="pagination-rounded">
                                                        <PaginationItem disabled>
                                                            <PaginationLink href="#" tabIndex="-1">Previous</PaginationLink>
                                                        </PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                        <PaginationItem active>
                                                            <PaginationLink href="#">2 <span className="sr-only">(current)</span></PaginationLink>
                                                        </PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                        <PaginationItem>
                                                            <PaginationLink href="#">Next</PaginationLink>
                                                        </PaginationItem>
                                                    </Pagination>
                
                                                
                                                    <Pagination aria-label="Page navigation example" className="pagination-rounded">
                                                        <PaginationItem disabled>
                                                            <span className="page-link"><i className="mdi mdi-chevron-left"></i></span>
                                                        </PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
                                                        <PaginationItem active>
                                                            <span className="page-link">
                                                                2
                                                                <span className="sr-only">(current)</span>
                                                            </span>
                                                        </PaginationItem>
                                                        <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
                                                        <PaginationItem>
                                                            <PaginationLink href="#"><i className="mdi mdi-chevron-right"></i></PaginationLink>
                                                        </PaginationItem>
                                                    </Pagination>
                                            </Col> 
                                        </Row>
                                       
                                    </CardBody>
                                </Card>
                                
                            </Col>
                        </Row>
                       
        
                        <Row>
                            <Col lg={6}>
                                <Card>
                                    <CardBody>
                                        <h4 className="card-title">Border spinner</h4>
                                        <p className="card-title-desc">Use the border spinners for a lightweight loading indicator.</p>
                                        <div>
                                        <Spinner className="mr-2" color="primary" />
                                        <Spinner className="mr-2" color="secondary" />
                                        <Spinner className="mr-2" color="success" />
                                        <Spinner className="mr-2" color="danger" />
                                        <Spinner className="mr-2" color="warning" />
                                        <Spinner className="mr-2" color="info" />
                                        <Spinner className="mr-2" color="light" />
                                        <Spinner className="mr-2" color="dark" />
                                        </div>
        
                                    </CardBody>
                                </Card>
                            </Col>
                            <Col lg={6}>
                                <Card>
                                    <CardBody>
                                        <h4 className="card-title">Growing spinner</h4>
                                        <p className="card-title-desc">If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!</p>
                                        <div>
                                        <Spinner type="grow" className="mr-2" color="primary" />
                                        <Spinner type="grow" className="mr-2" color="secondary" />
                                        <Spinner type="grow" className="mr-2" color="success" />
                                        <Spinner type="grow" className="mr-2" color="danger" />
                                        <Spinner type="grow" className="mr-2" color="warning" />
                                        <Spinner type="grow" className="mr-2" color="info" />
                                        <Spinner type="grow" className="mr-2" color="light" />
                                        <Spinner type="grow" className="mr-2" color="dark" />
                                        </div>
        
                                    </CardBody>
                                </Card>
                            </Col>
                        </Row>
                    </Container>
                </div>
            </React.Fragment >
        );
    }