Pixelstrap - Admin Document

Tables

Bootstrap basic table Preview link

#	First Name	Last Name	Username	Role	Country
1	Alexander	Orton	@mdorton	Admin	USA
2	John Deo	Deo	@johndeo	User	USA
3	Randy Orton	the Bird	@twitter	admin	UK
4	Randy Mark	Ottandy	@mdothe	user	AUS
5	Ram Jacob	Thornton	@twitter	admin	IND

import { Table } from "reactstrap";

<div className="table-responsive">
 <Table responsive striped>
  <thead>
   <tr>
    <th scope="col">#</th>
    <th scope="col">First Name</th>
    <th scope="col">Last Name</th>
    <th scope="col">Username</th>
    <th scope="col">Role</th>
    <th scope="col">Country</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <th scope="row">1</th>
    <td>Alexander</td>
    <td>Orton</td>
    <td>@mdorton</td>
    <td>Admin</td>
    <td>USA</td>
   </tr>
   <tr>
    <th scope="row">2</th>
    <td>John Deo</td>
    <td>Deo</td>
    <td>@johndeo</td>
    <td>User</td>
    <td>USA</td>
   </tr>
   <tr>
    <th scope="row">3</th>
    <td>Randy Orton</td>
    <td>the Bird</td>
    <td>@twitter</td>
    <td>admin</td>
    <td>UK</td>
   </tr>
   <tr>
    <th scope="row">4</th>
    <td>Randy Mark</td>
    <td>Ottandy</td>
    <td>@mdothe</td>
    <td>user</td>
    <td>AUS</td>
   </tr>
   <tr>
    <th scope="row">5</th>
    <td>Ram Jacob</td>
    <td>Thornton</td>
    <td>@twitter</td>
    <td>admin</td>
    <td>IND</td>
   </tr>
  </tbody>
 </Table>
</div>

Sizing table Preview link

You have to change only table sizing attribute.you can use size=*(sm,lg,xl,xs)

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

import { Table } from "reactstrap";

<div className="table-responsive">
 <Table responsive size="sm">
  <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>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
   </tr>
   <tr>
    <th scope="row">3</th>
    <td colspan="2">Larry the Bird</td>
    <td>@twitter</td>
   </tr>
  </tbody>
 </Table>
</div>

Border tables Preview link

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

import { Table } from "reactstrap";

<div className="table-responsive">
 <Table responsive bordered>
  <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>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
   </tr>
   <tr>
    <th scope="row">3</th>
    <td colspan="2">Larry the Bird</td>
    <td>@twitter</td>
   </tr>
  </tbody>
 </Table>
</div>

Styling table Preview link

You can change only table color class for particular tr, tbody, thead, table.you can use table-* (primary, secondary,success,info,warning,danger,light)or bg-*(template colors) class

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

import { Table } from "reactstrap";
                  
<div class="table-responsive">
 <Table responsive className="table-primary">
  <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>
    <th scope="row">2</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
   </tr>
   <tr>
    <th scope="row">3</th>
    <td>Larry the Bird</td>
    <td>Bird</td>
    <td>@twitter</td>
   </tr>
  </tbody>
 </Table>
</div>