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 class.you can use table-*(sm,lg,xl,xs) class

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

Datatable Offical link Preview link

Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
Garrett Winters	Accountant	Tokyo	63	2011/07/25	$170,750

import DataTable from "react-data-table-component";

const ZERO_CONFIGURATION_DATA = [
  {
    id: 1,
    name: "Airi Satou",
    position: "Accountant",
    office: "Tokyo",
    age: 33,
    startDate: "2008/11/28",
    salary: "$162,700",
    action: "t-1"
  },
];

const TableAction = ({ id }: TableActionType) => {
  return (
    <L className="action simple-list d-flex flex-row" id={id}>
      <LI className="edit">
        <a href={Href}>
          <i className="icon-pencil-alt"/>
        </a>
      </LI>
      <LI className="delete">
        <a href={Href}>
          <i className="icon-trash"/>
        </a>
      </LI>
    </UL>
  );
};

export const ZERO_CONFIGURATION_COLUMN = [
  {
    name: "Name",
    selector: (row: ZeroConfigurationTableColumnsType) => row["name"],
    sortable: true,
    center: false,
  },
  {
    name: "Position",
    selector: (row: ZeroConfigurationTableColumnsType) => `${row.position}`,
    sortable: true,
    center: true,
  },
  {
    name: "office",
    selector: (row: ZeroConfigurationTableColumnsType) => `${row.office}`,
    sortable: true,
    center: true,
  },
  {
    name: "Age",
    selector: (row: ZeroConfigurationTableColumnsType) => `${row.age}`,
    sortable: true,
    center: true,
  },
  {
    name: "start Date",
    selector: (row: ZeroConfigurationTableColumnsType) => row["startDate"],
    sortable: true,
    center: true,
  },
  {
    name: "Salery",
    selector: (row: ZeroConfigurationTableColumnsType) => `${row.salary}`,
    sortable: true,
    center: true,
  },
  {
    name: "action",
    cell: (row: ZeroConfigurationTableColumnsType) => <TableAction id={row.action}/>,
    sortable: true,
    center: true,
  },
];

export const ZeroConfigurationTable = () => {
  return (
    <Card>
      <ZeroConfigurationHeader />
      <CardBody>
        <div className="table-responsive">
          <DataTable data={ZERO_CONFIGURATION_DATA} columns={ZERO_CONFIGURATION_COLUMN} pagination highlightOnHover striped />
        </div>
      </CardBody>
    </Card>
  );
};