Top

Popular Search:

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 

npm i react-data-table-component

table

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 (
      <UL 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>
);
};

Remove package from project

npm remove react-data-table-component