Spruha - Basic Tables

Basic Tables

Name	Created On	Number	Status
Mark	21,Dec 2021	+1234-12340	Completed
Monika	29,April 2022	+1523-12459	Failed
Madina	30,Nov 2022	+1982-16234	Successful
Bhamako	18,Mar 2022	+1526-10729	Pending

<Table className="table text-nowrap">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Created On</th>
<th scope="col">Number</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Mark</th>
<td>21,Dec 2021</td>
<td>+1234-12340</td>
<td><Badge bg="outline-primary" className="badge">
Completed</Badge></td>
</tr>
<tr>
<th scope="row">Monika</th>
<td>29,April 2022</td>
<td>+1523-12459</td>
<td><Badge bg="outline-warning" className="badge">
Failed</Badge></td>
</tr>
<tr>
<th scope="row">Madina</th>
<td>30,Nov 2022</td>
<td>+1982-16234</td>
<td><Badge bg="outline-success" className="badge">
Successful</Badge></td>
</tr>
<tr>
<th scope="row">Bhamako</th>
<td>18,Mar 2022</td>
<td>+1526-10729</td>
<td><Badge bg="outline-secondary" className="badge">
Pending</Badge></td>
</tr>
</tbody>
</Table>

Bordered Tables

User	Status	Email
Sukuro Kim	Active	kimosukuro@gmail.com
Hasimna	Inactive	hasimna2132@gmail.com
Azimo Khan	Active	azimokhan421@gmail.com
Samantha Julia	Active	julianasams143@gmail.com

   <Table className="table text-nowrap table-bordered">
<thead>
<tr>
<th scope="col">User</th>
<th scope="col">Status</th>
<th scope="col">Email</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
 <div className="d-flex align-items-center">
     <span className="avatar avatar-xs me-2 online avatar-rounded">
         <img src={face13} alt="img"/>
     </span>Sukuro Kim
 </div>
</th>
<td><span className="badge bg-success-transparent">Active</span></td>
<td>kimosukuro@gmail.com</td>
<td>
 <div className="hstack gap-2 flex-wrap">
     <Link href="#" className="text-info fs-14 lh-1"><i
             className="ri-edit-line"></i></Link>
     <Link href="#" className="text-danger fs-14 lh-1"><i
             className="ri-delete-bin-5-line"></i></Link>
 </div>
</td>
</tr>
<tr>
<th scope="row">
 <div className="d-flex align-items-center">
     <span className="avatar avatar-xs me-2 offline avatar-rounded">
         <img src={face6} alt="img"/>
     </span>Hasimna
 </div>
</th>
<td><span className="badge bg-light text-dark">Inactive</span></td>
<td>hasimna2132@gmail.com</td>
<td>
 <div className="hstack gap-2 flex-wrap">
     <Link href="#" className="text-info fs-14 lh-1"><i
             className="ri-edit-line"></i></Link>
     <Link href="#" className="text-danger fs-14 lh-1"><i
             className="ri-delete-bin-5-line"></i></Link>
 </div>
</td>
</tr>
</tbody>
</Table>

Bordered Primary

Order	Date	Customer	Action
#0007	26-04-2022	Mayor Kelly	Booked
#0008	15-02-2022	Wicky Kross	Booked
#0009	23-05-2022	Julia Cam	Booked

<Table bordered  className="table text-nowrap  border-primary">
<thead>
<tr>
 <th scope="col">Order</th>
 <th scope="col">Date</th>
 <th scope="col">Customer</th>
 <th scope="col">Action</th>
</tr>
</thead>
<tbody>
{Table2data.map((idx)=>(
<tr key={Math.random()}>
 <th scope="row">
     {idx.order}
 </th>
 <td>
     <span className="badge bg-light text-dark">{idx.date}</span>
 </td>
 <td>
     <div className="d-flex align-items-center">
         <span className="avatar avatar-xs me-2 online avatar-rounded">
             <img src={idx.src} alt="img"/>
         </span>{idx.name}
     </div>
 </td>
 <td><span className="badge bg-primary-transparent">Booked</span></td>
</tr>
))}
</tbody>
</Table>

Bordered Success

Order	Date	Customer	Status
#0011	07-01-2022	Helsenky	Delivered
#0012	18-05-2022	Brodus	Delivered
#0013	19-03-2022	Chikka Alen	Delivered

<Table bordered className="table text-nowrap border-success">
<thead>
<tr>
<th scope="col">Order</th>
<th scope="col">Date</th>
<th scope="col">Customer</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
{Table3data.map((idx)=>(
<tr key={Math.random()}>
<th scope="row">
   {idx.order}
</th>
<td>
    <span className="badge bg-light text-dark">{idx.date}</span>
</td>
<td>
    <div className="d-flex align-items-center">
        <span className="avatar avatar-xs me-2 online avatar-rounded">
            <img src={idx.src} alt="img"/>
        </span>{idx.name}
    </div>
</td>
<td><span className="badge bg-success-transparent">Delivered</span></td>
</tr>
))}
</tbody>
</Table>

Bordered warning

Order	Date	Customer	Action
#0014	21-02-2022	Sukuro Kim	Accepted
#0018	26-03-2022	Alex Carey	Accepted
#0020	14-03-2022	Pamila Anderson	Accepted

<Table bordered className="table text-nowrap table-bordered border-warning">
<thead>
<tr>
<th scope="col">Order</th>
<th scope="col">Date</th>
<th scope="col">Customer</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{Table4data.map((idx)=>(
<tr key={Math.random()}>
<th scope="row">
    {idx.order}
</th>
<td>
    <span className="badge bg-light text-dark">{idx.date}</span>
</td>
<td>
    <div className="d-flex align-items-center">
        <span className="avatar avatar-xs me-2 online avatar-rounded">
            <img src={idx.src} alt="img"/>
        </span>{idx.name}
    </div>
</td>
<td><span className="badge bg-warning-transparent">Accepted</span></td>
</tr>
))}
</tbody>
</Table>

Table Without Borders

User Name	Transaction Id	Created	Status
Harshrath	#5182-3467	24 May 2022	Fixed
Zozo Hadid	#5182-3412	02 July 2022	In Progress
Martiana	#5182-3423	15 April 2022	Completed
Alex Carey	#5182-3456	17 March 2022	Pending

<Table borderless className="text-nowrap">
<thead>
<tr>
 <th scope="col">User Name</th>
 <th scope="col">Transaction Id</th>
 <th scope="col">Created</th>
 <th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
 <th scope="row">Harshrath</th>
 <td>#5182-3467</td>
 <td>24 May 2022</td>
 <td><span className="badge bg-primary">Fixed</span></td>
</tr>
<tr>
 <th scope="row">Zozo Hadid</th>
 <td>#5182-3412</td>
 <td>02 July 2022</td>
 <td><span className="badge bg-warning">In Progress</span></td>
</tr>
<tr>
 <th scope="row">Martiana</th>
 <td>#5182-3423</td>
 <td>15 April 2022</td>
 <td><span className="badge bg-success">Completed</span></td>
</tr>
<tr>
 <th scope="row">Alex Carey</th>
 <td>#5182-3456</td>
 <td>17 March 2022</td>
 <td><span className="badge bg-danger">Pending</span></td>
</tr>
</tbody>
</Table>

Table Group Divideres

Product	Seller	Sale Percentage	Qunatity Sold
Smart Watch	Slowtrack.inc	24.23%	250/1786
White Sneakers	American & Co.inc	12.45%	123/985
Baseball Bat	Sports Company	06.64%	124/232
Black Hoodie	Renonds Fabrics	14.42%	192/2456

<Table className="table text-nowrap">
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Seller</th>
<th scope="col">Sale Percentage</th>
<th scope="col">Qunatity Sold</th>
</tr>
</thead>
<tbody className="table-group-divider">
<tr>
<th scope="row">Smart Watch</th>
<td>Slowtrack.inc</td>
<td><Link href="#" className="text-success">24.23%<i
            className="ri-arrow-up-fill ms-1"></i></Link></td>
<td>250/1786</td>
</tr>
<tr>
<th scope="row">White Sneakers</th>
<td>American & Co.inc</td>
<td><Link href="#" className="text-danger">12.45%<i
            className="ri-arrow-down-fill ms-1"></i></Link></td>
<td>123/985</td>
</tr>
<tr>
<th scope="row">Baseball Bat</th>
<td>Sports Company</td>
<td><Link href="#" className="text-success">06.64%<i
            className="ri-arrow-up-fill ms-1"></i></Link></td>
<td>124/232</td>
</tr>
<tr>
<th scope="row">Black Hoodie</th>
<td>Renonds Fabrics</td>
<td><Link href="#" className="text-success">14.42%<i
            className="ri-arrow-up-fill ms-1"></i></Link></td>
<td>192/2456</td>
</tr>
</tbody>
</Table>

Striped rows

ID	Date	Customer
2022R-01	27-010-2022	Moracco
2022R-02	28-10-2022	Thornton
2022R-03	22-10-2022	Larry Bird
2022R-04	29-09-2022	Erica Sean

 <Table striped className="table text-nowrap table-striped">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Date</th>
<th scope="col">Customer</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{Table5data.map((idx)=>(
<tr key={Math.random()}>
<th scope="row">{idx.order}</th>
<td>{idx.date}</td>
<td>{idx.name}</td>
<td>
    <Button variant='success' className="btn btn-sm btn-wave">
        <i className="ri-download-2-line align-middle me-2 d-inline-block"></i>Download
    </Button>
</td>
</tr>
))}
</tbody>
</Table>

Striped columns

ID	Date	Customer
2022R-01	27-010-2022	Moracco
2022R-02	28-10-2022	Thornton
2022R-03	22-10-2022	Larry Bird
2022R-04	29-09-2022	Erica Sean

<Table striped="columns" className="table text-nowrap">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Date</th>
<th scope="col">Customer</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{Table5data.map((idx)=>(
<tr>
<th scope="row">{idx.order}</th>
<td>{idx.date}</td>
<td>{idx.name}</td>
<td>
    <Button variant='' className="btn btn-sm btn-danger btn-wave">
        <i className="ri-delete-bin-line align-middle me-2 d-inline-block"></i>Delete
    </Button>
</td>
</tr>
))}
</tbody>
</Table>

Primary Table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	Thornton	@twitter

<Table variant='primary' className="table text-nowrap">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
{Table6data.map((idx)=>(
<tr key={Math.random()}>
<th scope="row">{idx.id}</th>
<td>{idx.text1}</td>
<td>{idx.text2}</td>
<td>{idx.text3}</td>
</tr>
))}
</tbody>
</Table>

Secondary Table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	Thornton	@twitter

<Table variant='secondary' className="table text-nowrap">
<thead>
<tr>
 <th scope="col">#</th>
 <th scope="col">First</th>
 <th scope="col">Last</th>
 <th scope="col">Handle</th>
</tr>
</thead>
<tbody>
{Table6data.map((idx)=>(
<tr>
 <th scope="row">{idx.id}</th>
 <td>{idx.text1}</td>
 <td>{idx.text2}</td>
 <td>{idx.text3}</td>
</tr>
))}
</tbody>
</Table>

Warning Table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	Thornton	@twitter

<Table variant='warning' className="table text-nowrap">
<thead>
<tr>
 <th scope="col">#</th>
 <th scope="col">First</th>
 <th scope="col">Last</th>
 <th scope="col">Handle</th>
</tr>
</thead>
<tbody>
{Table6data.map((idx)=>(
<tr>
 <th scope="row">{idx.id}</th>
 <td>{idx.text1}</td>
 <td>{idx.text2}</td>
 <td>{idx.text3}</td>
</tr>
))}
</tbody>
</Table>

Danger Table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	Thornton	@twitter

<Table variant='danger' className="table text-nowrap">
<thead>
<tr>
 <th scope="col">#</th>
 <th scope="col">First</th>
 <th scope="col">Last</th>
 <th scope="col">Handle</th>
</tr>
</thead>
<tbody>
{Table6data.map((idx)=>(
<tr>
 <th scope="row">{idx.id}</th>
 <td>{idx.text1}</td>
 <td>{idx.text2}</td>
 <td>{idx.text3}</td>
</tr>
))}
</tbody>
</Table>

Dark Table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	Thornton	@twitter

<Table variant='dark' className="table text-nowrap">
<thead>
<tr>
 <th scope="col">#</th>
 <th scope="col">First</th>
 <th scope="col">Last</th>
 <th scope="col">Handle</th>
</tr>
</thead>
<tbody>
{Table6data.map((idx)=>(
<tr>
 <th scope="row">{idx.id}</th>
 <td>{idx.text1}</td>
 <td>{idx.text2}</td>
 <td>{idx.text3}</td>
</tr>
))}
</tbody>
</Table>

Success Table With Striped Rows

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird	Thornton	@twitter

<Table striped variant='success' className="table text-nowrap">
<thead>
<tr>
 <th scope="col">#</th>
 <th scope="col">First</th>
 <th scope="col">Last</th>
 <th scope="col">Handle</th>
</tr>
</thead>
<tbody>
{Table6data.map((idx)=>(
<tr>
 <th scope="row">{idx.id}</th>
 <td>{idx.text1}</td>
 <td>{idx.text2}</td>
 <td>{idx.text3}</td>
</tr>
))}
</tbody>
</Table>

Hoverable Rows

Product Manager	Category	Team
Joanna Smith joannasmith14@gmail.com	Fashion	+5
Kara Kova milesakara@gmail.com	Clothing	+6
Donald Trimb donaldo21@gmail.com	Electronics	+2
Justin Gaethje justingae@gmail.com	Sports	+5

  <Table hover className="text-nowrap">
<thead>
<tr>
 <th scope="col">Product Manager</th>
 <th scope="col">Category</th>
 <th scope="col">Team</th>
 <th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
 <td>
     <div className="d-flex align-items-center">
         <div className="avatar avatar-sm me-2 avatar-rounded">
             <img src={face10} alt="img"/>
         </div>
         <div>
             <div className="lh-1">
                 <span>Joanna Smith</span>
             </div>
             <div className="lh-1">
                 <span
                     className="fs-11 text-muted">joannasmith14@gmail.com</span>
             </div>
         </div>
     </div>
 </td>
 <td><span className="badge bg-primary-transparent">Fashion</span></td>
 <td>
     <div className="avatar-list-stacked">
         <span className="avatar avatar-sm avatar-rounded">
             <img src={face2} alt="img"/>
         </span>
         <span className="avatar avatar-sm avatar-rounded">
             <img src={face8} alt="img"/>
         </span>
         <span className="avatar avatar-sm avatar-rounded">
             <img src={face2} alt="img"/>
         </span>
         <Link className="avatar avatar-sm bg-primary text-fixed-white avatar-rounded"
             href="#">
             +5
         </Link>
     </div>
 </td>
 <td>
     <ProgressBar variant='primary' className="progress-xs"  now={52}/>
 </td>
</tr>
</tbody>
</Table>

Hoverable rows With striped rows

Invoice	Customer	Status	Date
IN-2032	Mark Cruise markcruise24@gmail.com	Paid	Jul 26,2022
IN-2022	Charanjeep charanjeep@gmail.in	Paid	Mar 14,2022
IN-2014	Samantha Julie julie453@gmail.com	Cancelled	Feb 1,2022
IN-2036	Simon Cohen simon@gmail.com	Refunded	Apr 24,2022

<Table striped hover className="table text-nowrap">
<thead>
<tr>
<th scope="col">Invoice</th>
<th scope="col">Customer</th>
<th scope="col">Status</th>
<th scope="col">Date</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">IN-2022</th>
<td>
<div className="d-flex align-items-center">
 <div className="avatar avatar-sm me-2 avatar-rounded">
     <img src="../assets/images/faces/12.jpg" alt="img"/>
 </div>
 <div>
     <div className="lh-1">
         <span>Charanjeep</span>
     </div>
     <div className="lh-1">
         <span
             className="fs-11 text-muted">charanjeep@gmail.in</span>
     </div>
 </div>
</div>
</td>
<td><span className="badge bg-success-transparent"><i
     className="ri-check-fill align-middle me-1"></i>Paid</span></td>
<td>Mar 14,2022</td>
</tr>
</tbody>
</Table>

Table Head Primary

User Name	Transaction Id	Created
Harshrath	#5182-3467	24 May 2022
Zozo Hadid	#5182-3412	02 July 2022
Martiana	#5182-3423	15 April 2022
Alex Carey	#5182-3456	17 March 2022

 <Table className="table text-nowrap">
<thead  className="table-primary">
<tr>
 <th scope="col">User Name</th>
 <th scope="col">Transaction Id</th>
 <th scope="col">Created</th>
 <th scope="col">Status</th>
</tr>
</thead>
<tbody>
{Table8data.map((idx)=>(
<tr key={Math.random()}>
 <th scope="row">{idx.name}</th>
 <td>{idx.text}</td>
 <td>{idx.date}</td>
 <td>
     <div className="hstack gap-2 fs-15">
         <Link href="#"
             className="btn btn-icon btn-sm btn-success-transparent rounded-pill"><i
                 className="ri-download-2-line"></i></Link>
         <Link href="#"
             className="btn btn-icon btn-sm btn-info-transparent rounded-pill"><i
                 className="ri-edit-line"></i></Link>
         <Link href="#"
             className="btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                 className="ri-delete-bin-line"></i></Link>
     </div>
 </td>
</tr>
))}
</tbody>
</Table>

Table Head warning

User Name	Transaction Id	Created
Harshrath	#5182-3467	24 May 2022
Zozo Hadid	#5182-3412	02 July 2022
Martiana	#5182-3423	15 April 2022
Alex Carey	#5182-3456	17 March 2022

<Table className="table text-nowrap">
<thead className="table-warning">
<tr>
<th scope="col">User Name</th>
<th scope="col">Transaction Id</th>
<th scope="col">Created</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
{Table9data.map((idx)=>(
<tr key={Math.random()}>
<th scope="row">{idx.name}</th>
<td>{idx.text}</td>
<td>{idx.date}</td>
<td>
<Button variant={idx.color} className="btn btn-sm">{idx.btn}</Button>
</td>
</tr>
))}

</tbody>
</Table>

Table Head Success

User Name	Transaction Id	Created
Harshrath	#5182-3467	24 May 2022
Zozo Hadid	#5182-3412	02 July 2022
Martiana	#5182-3423	15 April 2022
Alex Carey	#5182-3456	17 March 2022

<Table className="table text-nowrap">
<thead className="table-warning">
<tr>
<th scope="col">User Name</th>
<th scope="col">Transaction Id</th>
<th scope="col">Created</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
{Table9data.map((idx)=>(
<tr key={Math.random()}>
<th scope="row">{idx.name}</th>
<td>{idx.text}</td>
<td>{idx.date}</td>
<td>
<Button variant={idx.color} className="btn btn-sm">{idx.btn}</Button>
</td>
</tr>
))}

</tbody>
</Table>

Table Head Info

User Name	Transaction Id	Created
Harshrath	#5182-3467	24 May 2022
Zozo Hadid	#5182-3412	02 July 2022
Martiana	#5182-3423	15 April 2022
Alex Carey	#5182-3456	17 March 2022

<Table className="table text-nowrap">
<thead className="table-info">
<tr>
<th scope="col">User Name</th>
<th scope="col">Transaction Id</th>
<th scope="col">Created</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
{Table9data.map((idx)=>(
<tr key={Math.random()}>
<th scope="row">{idx.name}</th>
<td>{idx.text}</td>
<td>{idx.date}</td>
<td>
<Button variant={idx.color} className="btn btn-sm">{idx.btn}</Button>
</td>
</tr>
))}

</tbody>
</Table>

Table Head Secondary

User Name	Transaction Id	Created
Harshrath	#5182-3467	24 May 2022
Zozo Hadid	#5182-3412	02 July 2022
Martiana	#5182-3423	15 April 2022
Alex Carey	#5182-3456	17 March 2022

<Table className="table text-nowrap">
<thead className="table-secondary">
<tr>
<th scope="col">User Name</th>
<th scope="col">Transaction Id</th>
<th scope="col">Created</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
{Table9data.map((idx)=>(
<tr key={Math.random()}>
<th scope="row">{idx.name}</th>
<td>{idx.text}</td>
<td>{idx.date}</td>
<td>
<Button variant={idx.color} className="btn btn-sm">{idx.btn}</Button>
</td>
</tr>
))}

</tbody>
</Table>

Table Head Danger

User Name	Transaction Id	Created
Harshrath	#5182-3467	24 May 2022
Zozo Hadid	#5182-3412	02 July 2022
Martiana	#5182-3423	15 April 2022
Alex Carey	#5182-3456	17 March 2022

<Table className="table text-nowrap">
<thead className="table-danger">
<tr>
<th scope="col">User Name</th>
<th scope="col">Transaction Id</th>
<th scope="col">Created</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
{Table9data.map((idx)=>(
<tr key={Math.random()}>
<th scope="row">{idx.name}</th>
<td>{idx.text}</td>
<td>{idx.date}</td>
<td>
<Button variant={idx.color} className="btn btn-sm">{idx.btn}</Button>
</td>
</tr>
))}

</tbody>
</Table>

Table Foot

S.No	Team	Matches Won	Win Ratio
01	Manchester	232	42%
02	Barcelona	175	58%
03	Portugal	126	32%
Total	United States	558	56%

 <Table className="table text-nowrap">
<thead className="table-primary">
<tr>
<th scope="col">S.No</th>
<th scope="col">Team</th>
<th scope="col">Matches Won</th>
<th scope="col">Win Ratio</th>
</tr>
</thead>
<tbody>
{Table10data.map((idx)=>(
<tr key={Math.random()}>
<th scope="row"> {idx.text1}</th>
<td>{idx.text2}</td>
<td>{idx.text3} </td>
<td>
<span className="badge bg-primary">{idx.text4}</span>
</td>
</tr>
))}
</tbody>
<tfoot className="table-primary">
<tr>
<th scope="row"> Total </th>
<td>United States</td>
<td>558</td>
<td><span className="badge bg-primary">56%</span></td>
</tr>
</tfoot>
</Table>

Table With Caption

Top 3 Countries
S.No	Country	Medals Won	No Of Athletes
01	United States	2012	1823
02	United Kingdom	1012	992
03	Germany	914	875

<Table className="table text-nowrap">
<caption>Top 3 Countries</caption>
<thead>
<tr>
 <th scope="col">S.No</th>
 <th scope="col">Country</th>
 <th scope="col">Medals Won</th>
 <th scope="col">No Of Athletes</th>
</tr>
</thead>
<tbody>
<tr>
 <th scope="row">01</th>
 <td>United States</td>
 <td>2012<i className="ri-medal-line mx-2"></i></td>
 <td>1823</td>
</tr>
<tr>
 <th scope="row">02</th>
 <td>United Kingdom</td>
 <td>1012<i className="ri-medal-line mx-2"></i></td>
 <td>992</td>
</tr>
<tr>
 <th scope="row">03</th>
 <td>Germany</td>
 <td>914<i className="ri-medal-line mx-2"></i></td>
 <td>875</td>
</tr>
</tbody>
</Table>

Table With Top Caption

Top IT Companies
S.No	Name	Revenue	Country
1	Microsoft	$170 billion	United States
2	HP	$72 billion	United States
3	IBM	$60 billion	United States

<Table className="table text-nowrap caption-top">
<caption>Top IT Companies</caption>
<thead>
<tr>
<th scope="col">S.No</th>
<th scope="col">Name</th>
<th scope="col">Revenue</th>
<th scope="col">Country</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Microsoft</td>
<td>$170 billion</td>
<td>United States</td>
</tr>
<tr>
<th scope="row">2</th>
<td>HP</td>
<td>$72 billion</td>
<td>United States</td>
</tr>
<tr>
<th scope="row">3</th>
<td>IBM</td>
<td>$60 billion</td>
<td>United States</td>
</tr>
</tbody>
</Table>

Active Tables

Name	Created On	Number	Status
Mark	21,Dec 2021	+1234-12340	Completed
Monika	29,April 2022	+1523-12459	Failed
Madina	30,Nov 2022	+1982-16234	Successful
Bhamako	18,Mar 2022	+1526-10729	Pending

<Table className="table text-nowrap">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Created On</th>
<th scope="col">Number</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr className="table-active">
<th scope="row">Mark</th>
<td>21,Dec 2021</td>
<td>+1234-12340</td>
<td><span className="badge bg-primary">Completed</span></td>
</tr>
<tr>
<th scope="row">Monika</th>
<td>29,April 2022</td>
<td>+1523-12459</td>
<td><span className="badge bg-warning">Failed</span></td>
</tr>
<tr>
<th scope="row">Madina</th>
<td>30,Nov 2022</td>
<td className="table-active">+1982-16234</td>
<td><span className="badge bg-success">Successful</span></td>
</tr>
<tr>
<th scope="row">Bhamako</th>
<td>18,Mar 2022</td>
<td>+1526-10729</td>
<td><span className="badge bg-secondary">Pending</span></td>
</tr>
</tbody>
</Table>

Small Tables

Invoice	Created Date	Status
Zelensky	25-Apr-2021	Paid
Kim Jong	29-April-2022	Pending
Obana	30-Nov-2022	Paid
Sean Paul	01-Jan-2022	Paid
Karizma	14-Feb-2022	Pending

<Table size="sm" className="table text-nowrap">
<thead>
<tr>
<th scope="col">Invoice</th>
<th scope="col">Created Date</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{Table11data.map((idx)=>(
<tr key={Math.random()}>
<th scope="row">
    <div className="form-check">
        <Form.Check id={idx.id} className="" type="checkbox" value="" />
        <Form.Label className="" htmlFor="checkebox-sm">
          {idx.name}
        </Form.Label>
    </div>
</th>
<td>{idx.date}</td>
<td><Badge bg={idx.class} className="badge">{idx.text}</Badge></td>
<td>
    <div className="hstack gap-2 fs-15">
        <Link href="#" className="btn btn-icon btn-sm btn-light">
        <i className="ri-download-2-line"></i></Link>
        <Link href="#" className="btn btn-icon btn-sm btn-light">
        <i className="ri-edit-line"></i></Link>
    </div>
</td>
</tr>
))}
</tbody>
</Table>

Color variants tables

Color	Client	State	Quantity	Total Price
Default	Rita Book	Processed	22	$2,012
Primary	Rhoda Report	Processed	22	$4,254
Secondary	Rita Book	Processed	26	$1,234
Success	Anne Teak	Processed	42	$2,623
Danger	Dee End	Processed	52	$32,132
Warning	Lee Nonmi	Processed	10	$1,434
Info	Lynne Gwistic	Processed	63	$1,854
Light	Fran Tick	Processed	05	$823
Dark	Polly Pipe	Processed	35	$1,832

 <Table className="table text-nowrap">
<thead>
<tr>
<th scope="col">Color</th>
<th scope="col">Client</th>
<th scope="col">State</th>
<th scope="col">Quantity</th>
<th scope="col">Total Price</th>
</tr>
</thead>
<tbody>
{Table12data.map((idx)=>(
<tr key={Math.random()} className={idx.class1}>
<th scope="row">{idx.text}</th>
<td>{idx.name}</td>
<td><Badge bg={idx.color} className="badge">Processed</Badge></td>
<td>{idx.quantity}</td>
<td>{idx.price}</td>
</tr>
))}
</tbody>
</Table>

Nesting

First

Last

Handle

Mark

Otto

@mdo

Aplhabets	Users	Email
A	Dino King	dinoking231@gmail.com
B	Poppins sams	pops@gmail.com
C	Brian Shaw	swanbrian@gmail.com

Larry

the Bird

@twitter

Jimmy

the Ostrich

Dummy Text

Cobra Kai

the Snake

Another Name

<Table striped bordered className="table text-nowrap">
<thead>
<tr>
 <th scope="col">#</th>
 <th scope="col">First</th>
 <th scope="col">Last</th>
 <th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
 <th scope="row">1</th>
 <td>Mark</td>
 <td>Otto</td>
 <td>@mdo</td>
</tr>
<tr>
 <td colSpan={4}>
     <Table className="table text-nowrap mb-0">
         <thead>
             <tr>
                 <th scope="col">Aplhabets</th>
                 <th scope="col">Users</th>
                 <th scope="col">Email</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <th scope="row">A</th>
                 <td>Dino King</td>
                 <td>dinoking231@gmail.com</td>
             </tr>
             <tr>
                 <th scope="row">B</th>
                 <td>Poppins sams</td>
                 <td>pops@gmail.com</td>
             </tr>
             <tr>
                 <th scope="row">C</th>
                 <td>Brian Shaw</td>
                 <td>swanbrian@gmail.com</td>
             </tr>
         </tbody>
     </Table>
 </td>
</tr>
<tr>
 <th scope="row">3</th>
 <td>Larry</td>
 <td>the Bird</td>
 <td>@twitter</td>
</tr>
<tr>
 <th scope="row">4</th>
 <td>Jimmy</td>
 <td>the Ostrich</td>
 <td>Dummy Text</td>
</tr>
<tr>
 <th scope="row">5</th>
 <td>Cobra Kai</td>
 <td>the Snake</td>
 <td>Another Name</td>
</tr>
</tbody>
</Table>

Always responsive

Team Head	Category	Role	Gmail	Team	Revenue
Mayor Kelly	Manufacturer	Team Lead	mayorkrlly@gmail.com	+4	$10,984.29
Andrew Garfield	Managing Director	Director	andrewgarfield@gmail.com	+4	$1.4billion
Simon Cowel	Service Manager	Manager	simoncowel234@gmail.com	+10	$7,123.21
Mirinda Hers	Recruiter	Employee	mirindahers@gmail.com	+6	$2,325.45

<Table className="table text-nowrap">
<thead>
<tr>
 <th scope="col">
     <Form.Check className="" type="checkbox" id="checkboxNoLabel" value="" aria-label="..."/></th>
 <th scope="col">Team Head</th>
 <th scope="col">Category</th>
 <th scope="col">Role</th>
 <th scope="col">Gmail</th>
 <th scope="col">Team</th>
 <th scope="col">Work Progress</th>
 <th scope="col">Revenue</th>
 <th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
 <th scope="row">
     <Form.Check className="=" type="checkbox" id="checkboxNoLabel1" value="" aria-label="..."/></th>
 <td>
     <div className="d-flex align-items-center">
         <span className="avatar avatar-xs me-2 online avatar-rounded">
             <img src={face3} alt="img"/>
         </span>Mayor Kelly
     </div>
 </td>
 <td>Manufacturer</td>
 <td><span className="badge bg-primary-transparent">Team Lead</span></td>
 <td>mayorkrlly@gmail.com</td>
 <td>
     <div className="avatar-list-stacked">
         <span className="avatar avatar-sm avatar-rounded">
             <img src={face2} alt="img"/>
         </span>
         <span className="avatar avatar-sm avatar-rounded">
             <img src={face8} alt="img"/>
         </span>
         <span className="avatar avatar-sm avatar-rounded">
             <img src={face2} alt="img"/>
         </span>
         <Link className="avatar avatar-sm bg-primary text-fixed-white avatar-rounded" href="#">
             +4
         </Link>
     </div>
 </td>
 <td>
     <ProgressBar className="progress progress-xs" variant='primary' now={52} />
 </td>
 <td>$10,984.29</td>
 <td>
     <div className="hstack gap-2 fs-15">
         <Link href="#" className="btn btn-icon btn-sm btn-success">
         <i className="ri-download-2-line"></i></Link>
         <Link href="#" className="btn btn-icon btn-sm btn-info">
         <i className="ri-edit-line"></i></Link>
     </div>
 </td>
</tr>
<tr>
 <th scope="row">
 <Form.Check className="" type="checkbox" id="checkboxNoLabel2" value="" aria-label="..."/></th>
 <td>
     <div className="d-flex align-items-center">
         <span className="avatar avatar-xs me-2 online avatar-rounded">
             <img src={face12} alt="img"/>
         </span>Andrew Garfield
     </div>
 </td>
 <td>Managing Director</td>
 <td><span className="badge bg-warning-transparent">Director</span></td>
 <td>andrewgarfield@gmail.com</td>
 <td>
     <div className="avatar-list-stacked">
         <span className="avatar avatar-sm avatar-rounded">
             <img src={face1} alt="img"/>
         </span>
         <span className="avatar avatar-sm avatar-rounded">
             <img src={face5} alt="img"/>
         </span>
         <span className="avatar avatar-sm avatar-rounded">
             <img src={face11} alt="img"/>
         </span>
         <span className="avatar avatar-sm avatar-rounded">
             <img src={face15} alt="img"/>
         </span>
         <Link className="avatar avatar-sm bg-primary text-fixed-white avatar-rounded" href="#">
             +4
         </Link>
     </div>
 </td>
 <td>
 <ProgressBar className="progress progress-xs" variant='primary' now={91} />
     
 </td>
 <td>$1.4billion</td>
 <td>
     <div className="hstack gap-2 fs-15">
         <Link href="#" className="btn btn-icon btn-sm btn-success">
         <i className="ri-download-2-line"></i></Link>
         <Link href="#" className="btn btn-icon btn-sm btn-info">
         <i className="ri-edit-line"></i></Link>
     </div>
 </td>
</tr>   
</tbody>
</Table>

Vertical alignment

Heading 1	Heading 2	Heading 3	Heading 4
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.
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.
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.

 <Table className="table align-middle">
<thead>
<tr>
<th scope="col" className="w-25">Heading 1</th>
<th scope="col" className="w-25">Heading 2</th>
<th scope="col" className="w-25">Heading 3</th>
<th scope="col" className="w-25">Heading 4</th>
</tr>
</thead>
<tbody>
{Table13data.map((idx)=>(
<tr key={Math.random()} className={idx.class1}>
<td>{idx.text1} <code>{idx.code1}</code> {idx.text2}</td>
<td>{idx.text1} <code>{idx.code1}</code> {idx.text2}</td>
<td className={idx.class2}>{idx.text3} <code>{idx.code2}</code> {idx.text4 }</td>
<td>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.</td>
</tr>
))}
</tbody>
</Table>

Switcher

Todo

Overview