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

Datatable Offical link Preview link 

npm i react-data-table-component


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