import React from 'react' import { Card, Col, Container, Form, Row, Table } from 'react-bootstrap'; import BreadCrumb from '../../../Components/Common/BreadCrumb'; import PreviewCardHeader from '../../../Components/Common/PreviewCardHeader'; import UiContent from "../../../Components/Common/UiContent"; import { DefaultTables, StrippedRow, TablesColors, HoverableRows, CardTables, ActiveTables, BorderedTables, TablesBorderColors, TablesWithoutBorders, SmallTables, TableHead, TableFoot, Captions, TableNesting, Variants, VerticalAlignment, ResponsiveTables, StripedColumnsTables } from './BasicTablesCode'; //Import images import avtarImage1 from '../../../../images/users/avatar-1.jpg'; import avtarImage3 from '../../../../images/users/avatar-3.jpg'; import avtarImage4 from '../../../../images/users/avatar-4.jpg'; import avtarImage5 from '../../../../images/users/avatar-5.jpg'; import avtarImage6 from '../../../../images/users/avatar-6.jpg'; import { Head, Link } from '@inertiajs/react'; import Layout from '../../../Layouts'; const BasicTables = () => { return (

Use Table attribute to show bootstrap-based default table.

ID Customer Date Invoice Action
#VZ2110 Bobby Davis October 15, 2021 $2,300 View More
#VZ2109 Christopher Neal October 7, 2021 $5,500 View More
#VZ2108 Monkey Karry October 5, 2021 $2,420 View More
#VZ2107 James White October 2, 2021 $7,452 View More

Use table-striped className to add zebra-striping to any table row within the <tbody>.

ID Customer Date Invoice Action
01 Bobby Davis Nov 14, 2021 $2,410 Confirmed
02 Christopher Neal Nov 21, 2021 $1,450 Waiting
03 Monkey Karry Nov 24, 2021 $3,500 Confirmed
04 Aaron James Nov 25, 2021 $6,875 Cancelled

Use .table-striped-columns to add zebra-striping to any table column.

 ID Name Date Total Status Action
#VL2110 William Elmore 07 Oct, 2021 $24.05 Paid
#VL2109 Georgie Winters 07 Oct, 2021 $26.15 Paid
#VL2108 Whitney Meier 06 Oct, 2021 $21.25 Refund
#VL2107 Justin Maier 05 Oct, 2021 $25.03 Paid

Use table-dark className to set dark color table body and table-success className to set success color table body respectively. use table- className with different color variation to set required table body color.

ID Customer Date Invoice
01 Bobby Davis Nov 14, 2021 $2,410
02 Christopher Neal Nov 21, 2021 $1,450
03 Monkey Karry Nov 24, 2021 $3,500
04 Aaron James Nov 25, 2021 $6,875
ID Invoice Amount Date Status Action
01 Basic Plan $860 Nov 22, 2021 Subscribed
02 Premium Plan $1200 Nov 10, 2021 Unsubscribed
03 Basic Plan $860 Nov 19, 2021 Subscribed
04 Corporate Plan $1599 Nov 22, 2021 Subscribed

Use table-hover className to enable a hover state on table rows within a <tbody>.

 Order ID Shop Customer Price Action
#541254265 Amezon Cleo Carson $4,521
#744145235 Shoppers Juston Eichmann $7,546
#9855126598 Flipkart Bettie Johson $1,350
#847512653 Shoppers Maritza Blanda $4,521
ID Invoice Amount Date Status Action
01 Basic Plan $860 Nov 22, 2021 Subscribed
Yes/No
02 Premium Plan $1200 Nov 10, 2021 Unsubscribed
Yes/No
03 Basic Plan $860 Nov 19, 2021 Subscribed
Yes/No
04 Corporate Plan $1599 Nov 22, 2021 Subscribed
Yes/No

Use table-card className to show card-based table within a <tbody>.

 ID Name Date Total Status Action
#VL2110 William Elmore 07 Oct, 2021 $24.05 Paid
#VL2109 Georgie Winters 07 Oct, 2021 $26.15 Paid
#VL2108 Whitney Meier 06 Oct, 2021 $21.25 Refund
#VL2107 Justin Maier 05 Oct, 2021 $25.03 Paid

Use table-active className to highlight a table row or cell.

 Order ID Shop Customer Price Action
#541254265 Amezon Cleo Carson $4,521
#744145235 Shoppers Juston Eichmann $7,546
#9855126598 Flipkart Bettie Johson $1,350
#847512653 Shoppers Maritza Blanda $4,521

Use table-bordered className to show borders on all sides of the table and cells.

ID Title Status Assignee Price
01 Implement new UX Backlog Lanora Sandoval $4,521
  • View
  • Edit
  • Delete
02 Design syntax In Progress Calvin Garrett $7,546
  • View
  • Edit
  • Delete
03 Configurable resources Done Florence Guzman $1,350
  • View
  • Edit
  • Delete
04 Implement extensions In Progress Maritza Blanda $4,521
  • View
  • Edit
  • Delete

Use border- className with color variation className to set table border color.

ID Title Status Assignee Price
01 Implement new UX Backlog Lanora Sandoval $4,521
  • View
  • Edit
  • Delete
02 Design syntax In Progress Calvin Garrett $7,546
  • View
  • Edit
  • Delete
03 Configurable resources Done Florence Guzman $1,350
  • View
  • Edit
  • Delete
04 Implement extensions In Progress Maritza Blanda $4,521
  • View
  • Edit
  • Delete

Use table-borderless to set a table without borders.

ID Name Job Title Date Status
01 Annette Black Industrial Designer 10, Nov 2021 Active
02 Bessie Cooper Graphic Designer 13, Nov 2021 Active
03 Leslie Alexander Product Manager 17, Nov 2021 Active
04 Lenora Sandoval Applications Engineer 25, Nov 2021 Disabled

Use table-sm className to create any table more compact by cutting all cell padding in half.

ID Title Status Assignee
01 Implement new UX Backlog Lanora Sandoval
02 Design syntax In Progress Calvin Garrett
03 Configurable resources Done Florence Guzman
04 Implement extensions Backlog Maritza Blanda
05 Applications Engineer Done Leslie Alexander

Use table-light or table-dark className to create <thead> appear light or dark.

Student Course Author Payment Process Status
Milana Scot UI/UX design Mitchell Flores $450
Confirmed
Jassica Welsh 3d Animation Dan Evgeni $860
Waiting
Leslie Alexander Logotype Design Olimpia Jordan $450
Waiting

Add <tbody> attribute to group footer content in an HTML table.

ID Name Job Title Date Payment
01 Annette Black Industrial Designer 10, Nov 2021 $450
02 Bessie Cooper Graphic Designer 13, Nov 2021 $875
03 Leslie Alexander Product Manager 17, Nov 2021 $410
Total $940

You can also put the <caption> attribute on the top of the table with caption-top class.

List of users
ID Student Course Author
01 Milana Scot UI/UX design Mitchell Flores
02 Jassica Welsh 3d Animation Dan Evgeni
03 Leslie Alexander Logotype Design Olimpia Jordan

Example of basic table nesting. Border styles, active styles, and table variants are not inherited by nested tables.

ID Name Job Title Date Payment
01 Annette Black Industrial Designer 10, Nov 2021 $450
ID Student Course Author
I Milana Scot 3d Animation James Black
II Juston Eichmann Design syntax Olimpia Jordan
02 Bessie Cooper Graphic Designer 13, Nov 2021 $875
03 Leslie Alexander Product Manager 16, Nov 2021 $410
04 Bettie Johson Applications Engineer 24, Nov 2021 $620
05 Monkey Karry Implement new UX 25, Nov 2021 $795

Use table- className with below-mentioned color variation className within <tr> to set color on table row.

# Name Position Department
Default Monkey Karry Medical Specialist Orthopedics
Primary James White Medical Assistant Surgery
Secondary Aaron James Medical Specialist Neurology
Success Bettie Johson Medical Specialist Cardiology
Danger Bessie Cooper Medical Assistant Surgery
Warning Lenora Sandoval Medical Assistant Cardiology
Info Eric Pierce Medical Specialist Neurology
Light Ruth Zimmermann Medical Specialist Neurology
Dark Leslie Alexander Medical Assistant Cardiology

Table cells of <thead> are always vertical aligned to the bottom. Table cells in <tbody> inherit their alignment from <table> and are aligned to the the top by default. Use the vertical align classes to re-align where needed.

Heading Heading Heading Heading
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default.
This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This cell inherits vertical-align: bottom; from the table row This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default.
This cell inherits vertical-align: middle; from the table This cell inherits vertical-align: middle; from the table This cell is aligned to the top. This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default.

Use table-responsive className to make any table responsive across all viewports. Responsive tables allow tables to be scrolled horizontally with ease.

 ID Date Status Customer Purchased Revenue
#VZ2110 10 Oct, 14:47 Paid
Jordan Kennedy
Mastering the grid $9.98
#VZ2109 17 Oct, 02:10 Paid
Jackson Graham
Splashify $270.60
#VZ2108 26 Oct, 08:20 Refunded
Lauren Trujillo
Wireframing Kit for Figma $145.42
#VZ2107 02 Nov, 04:52 Cancel
Curtis Weaver
Wireframing Kit for Figma $170.68
#VZ2106 10 Nov, 07:20 Paid
Jason schuller
Splashify $350.87
Total $947.55
) } BasicTables.layout = (page:any) => export default BasicTables