Advance Tables UI
Using custom CSS style we have customised bootstrap table.
Basic example
Add the class .table-advance with <Table>, then extend with our optional modifier classes or custom styles.
| Name | Email address | Phone | Tags | |
|---|---|---|---|---|
| JamesDJames@jourrapide.com | +91-24-3432-1567 | Collaboration | ||
| ScottMTennant@jourrapide.com | +91-24-3432-1567 | Collaboration | ||
| KevinCPiercy@armyspy.com | +91-24-3432-1567 | Collaboration | ||
| BeverlyDEngman@dayrep.com | +91-24-3432-1567 | Collaboration | ||
| ThomasLMaitland@armyspy.com | +91-24-3432-1567 | Collaboration | ||
| DanielMKinney@armyspy.com | +91-24-3432-1567 | Collaboration |
import React from 'react';
import { Dropdown, Table } from 'react-bootstrap'
import { Archive, Edit2, MoreVertical } from 'react-feather'
import { Link } from 'react-router-dom'
import NubraTooltip from '../../../components/@nubra-tooltip/NubraTooltip'
//Images
import avatar1 from '../../../Assets/dist/img/avatar1.jpg';
import avatar2 from '../../../Assets/dist/img/avatar2.jpg';
import avatar3 from '../../../Assets/dist/img/avatar3.jpg';
import avatar4 from '../../../Assets/dist/img/avatar4.jpg';
import avatar5 from '../../../Assets/dist/img/avatar5.jpg';
import avatar6 from '../../../Assets/dist/img/avatar6.jpg';
const BasicExample = () => {
return (
<Table responsive borderless className="nowrap table-advance">
<thead>
<tr>
<th className="mnw-150p">Name</th>
<th className="mnw-200p">Email address</th>
<th className="mnw-150p">Phone</th>
<th>Tags</th>
<th />
</tr>
</thead>
<tbody>
<tr>
<td className="text-truncate">
<div className="media align-items-center">
<div className="media-head me-3">
<div className="avatar avatar-xs">
<img src={avatar1} alt="user" className="avatar-img" />
</div>
</div>
<div className="media-body mnw-0">
<a href="#some" className="table-link-text text-high-em text-truncate mb-0">Kim L. Gonzales</a>
</div>
</div>
</td>
<td className="text-truncate">JamesDJames@jourrapide.com</td>
<td className="text-truncate">+91-24-3432-1567</td>
<td><span className="badge badge-lg badge-light">Collaboration</span></td>
<td>
<div className="d-flex align-items-center justify-content-end">
<Link to="#" className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Archived" >
<span className="icon">
<span className="feather-icon">
<Archive />
</span>
</span>
</NubraTooltip>
</Link>
<Link className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Edit" >
<span className="icon">
<span className="feather-icon">
<Edit2 />
</span>
</span>
</NubraTooltip>
</Link>
<Dropdown>
<Dropdown.Toggle variant="flush-dark" className="btn-icon btn-rounded flush-soft-hover no-caret">
<NubraTooltip placement="top" title="More" >
<span className="icon">
<span className="feather-icon">
<MoreVertical />
</span>
</span>
</NubraTooltip>
</Dropdown.Toggle>
<Dropdown.Menu align='end' >
<Dropdown.Item>Action</Dropdown.Item>
<Dropdown.Item>Another action</Dropdown.Item>
<Dropdown.Item>Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item>Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</td>
</tr>
<tr className="table-row-gap"><td /></tr>
<tr>
<td className="text-truncate">
<div className="media align-items-center">
<div className="media-head me-3">
<div className="avatar avatar-xs">
<img src={avatar2} alt="user" className="avatar-img" />
</div>
</div>
<div className="media-body mnw-0">
<a href="#some" className="table-link-text text-high-em text-truncate mb-0">Victoria Lee</a>
</div>
</div>
</td>
<td className="text-truncate">ScottMTennant@jourrapide.com</td>
<td className="text-truncate">+91-24-3432-1567</td>
<td><span className="badge badge-lg badge-light">Collaboration</span></td>
<td>
<div className="d-flex align-items-center justify-content-end">
<Link to="#" className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Archived" >
<span className="icon">
<span className="feather-icon">
<Archive />
</span>
</span>
</NubraTooltip>
</Link>
<Link className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Edit" >
<span className="icon">
<span className="feather-icon">
<Edit2 />
</span>
</span>
</NubraTooltip>
</Link>
<Dropdown>
<Dropdown.Toggle variant="flush-dark" className="btn-icon btn-rounded flush-soft-hover no-caret">
<NubraTooltip placement="top" title="More" >
<span className="icon">
<span className="feather-icon">
<MoreVertical />
</span>
</span>
</NubraTooltip>
</Dropdown.Toggle>
<Dropdown.Menu align='end' >
<Dropdown.Item>Action</Dropdown.Item>
<Dropdown.Item>Another action</Dropdown.Item>
<Dropdown.Item>Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item>Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</td>
</tr>
<tr className="table-row-gap"><td /></tr>
<tr>
<td className="text-truncate">
<div className="media align-items-center">
<div className="media-head me-3">
<div className="avatar avatar-xs">
<img src={avatar3} alt="user" className="avatar-img" />
</div>
</div>
<div className="media-body mnw-0">
<a href="#some" className="table-link-text text-high-em text-truncate mb-0">Nancy Kauffman</a>
</div>
</div>
</td>
<td className="text-truncate">KevinCPiercy@armyspy.com</td>
<td className="text-truncate">+91-24-3432-1567</td>
<td><span className="badge badge-lg badge-light">Collaboration</span></td>
<td>
<div className="d-flex align-items-center justify-content-end">
<Link to="#" className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Archived" >
<span className="icon">
<span className="feather-icon">
<Archive />
</span>
</span>
</NubraTooltip>
</Link>
<Link className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Edit" >
<span className="icon">
<span className="feather-icon">
<Edit2 />
</span>
</span>
</NubraTooltip>
</Link>
<Dropdown>
<Dropdown.Toggle variant="flush-dark" className="btn-icon btn-rounded flush-soft-hover no-caret">
<NubraTooltip placement="top" title="More" >
<span className="icon">
<span className="feather-icon">
<MoreVertical />
</span>
</span>
</NubraTooltip>
</Dropdown.Toggle>
<Dropdown.Menu align='end' >
<Dropdown.Item>Action</Dropdown.Item>
<Dropdown.Item>Another action</Dropdown.Item>
<Dropdown.Item>Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item>Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</td>
</tr>
<tr className="table-row-gap"><td /></tr>
<tr>
<td className="text-truncate">
<div className="media align-items-center">
<div className="media-head me-3">
<div className="avatar avatar-xs">
<img src={avatar4} alt="user" className="avatar-img" />
</div>
</div>
<div className="media-body mnw-0">
<a href="#some" className="table-link-text text-high-em text-truncate mb-0">Joseph Heintz</a>
</div>
</div>
</td>
<td className="text-truncate">BeverlyDEngman@dayrep.com</td>
<td className="text-truncate">+91-24-3432-1567</td>
<td><span className="badge badge-lg badge-light">Collaboration</span></td>
<td>
<div className="d-flex align-items-center justify-content-end">
<Link to="#" className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Archived" >
<span className="icon">
<span className="feather-icon">
<Archive />
</span>
</span>
</NubraTooltip>
</Link>
<Link className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Edit" >
<span className="icon">
<span className="feather-icon">
<Edit2 />
</span>
</span>
</NubraTooltip>
</Link>
<Dropdown>
<Dropdown.Toggle variant="flush-dark" className="btn-icon btn-rounded flush-soft-hover no-caret">
<NubraTooltip placement="top" title="More" >
<span className="icon">
<span className="feather-icon">
<MoreVertical />
</span>
</span>
</NubraTooltip>
</Dropdown.Toggle>
<Dropdown.Menu align='end' >
<Dropdown.Item>Action</Dropdown.Item>
<Dropdown.Item>Another action</Dropdown.Item>
<Dropdown.Item>Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item>Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</td>
</tr>
<tr className="table-row-gap"><td /></tr>
<tr>
<td className="text-truncate">
<div className="media align-items-center">
<div className="media-head me-3">
<div className="avatar avatar-xs">
<img src={avatar5} alt="user" className="avatar-img" />
</div>
</div>
<div className="media-body mnw-0">
<a href="#some" className="table-link-text text-high-em text-truncate mb-0">Evelyn lee</a>
</div>
</div>
</td>
<td className="text-truncate">ThomasLMaitland@armyspy.com</td>
<td className="text-truncate">+91-24-3432-1567</td>
<td><span className="badge badge-lg badge-light">Collaboration</span></td>
<td>
<div className="d-flex align-items-center justify-content-end">
<Link to="#" className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Archived" >
<span className="icon">
<span className="feather-icon">
<Archive />
</span>
</span>
</NubraTooltip>
</Link>
<Link className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Edit" >
<span className="icon">
<span className="feather-icon">
<Edit2 />
</span>
</span>
</NubraTooltip>
</Link>
<Dropdown>
<Dropdown.Toggle variant="flush-dark" className="btn-icon btn-rounded flush-soft-hover no-caret">
<NubraTooltip placement="top" title="More" >
<span className="icon">
<span className="feather-icon">
<MoreVertical />
</span>
</span>
</NubraTooltip>
</Dropdown.Toggle>
<Dropdown.Menu align='end' >
<Dropdown.Item>Action</Dropdown.Item>
<Dropdown.Item>Another action</Dropdown.Item>
<Dropdown.Item>Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item>Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</td>
</tr>
<tr className="table-row-gap"><td /></tr>
<tr>
<td className="text-truncate">
<div className="media align-items-center">
<div className="media-head me-3">
<div className="avatar avatar-xs">
<img src={avatar6} alt="user" className="avatar-img" />
</div>
</div>
<div className="media-body mnw-0">
<a href="#some" className="table-link-text text-high-em text-truncate mb-0">Scott M. Tennant</a>
</div>
</div>
</td>
<td className="text-truncate">DanielMKinney@armyspy.com</td>
<td className="text-truncate">+91-24-3432-1567</td>
<td><span className="badge badge-lg badge-light">Collaboration</span></td>
<td>
<div className="d-flex align-items-center justify-content-end">
<Link to="#" className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Archived" >
<span className="icon">
<span className="feather-icon">
<Archive />
</span>
</span>
</NubraTooltip>
</Link>
<Link className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Edit" >
<span className="icon">
<span className="feather-icon">
<Edit2 />
</span>
</span>
</NubraTooltip>
</Link>
<Dropdown>
<Dropdown.Toggle variant="flush-dark" className="btn-icon btn-rounded flush-soft-hover no-caret">
<NubraTooltip placement="top" title="More" >
<span className="icon">
<span className="feather-icon">
<MoreVertical />
</span>
</span>
</NubraTooltip>
</Dropdown.Toggle>
<Dropdown.Menu align='end' >
<Dropdown.Item>Action</Dropdown.Item>
<Dropdown.Item>Another action</Dropdown.Item>
<Dropdown.Item>Something else here</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item>Separated link</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</td>
</tr>
</tbody>
</Table>
);
};
export default BasicExample;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Table hover
Add the base class .table-action-hover with <Table> and .table-fc-fixed,.table-lc-fixed with table for first and last column fixed.
| Name | Email address | Phone | Tags |
|---|---|---|---|
| JamesDJames@jourrapide.com | +91-24-3432-1567 | Collaboration | |
| ScottMTennant@jourrapide.com | +91-24-3432-1567 | Collaboration | |
| KevinCPiercy@armyspy.com | +91-24-3432-1567 | Collaboration | |
| BeverlyDEngman@dayrep.com | +91-24-3432-1567 | Collaboration | |
| ThomasLMaitland@armyspy.com | +91-24-3432-1567 | Collaboration | |
| DanielMKinney@armyspy.com | +91-24-3432-1567 | Collaboration |
import React from 'react';
import { Table } from 'react-bootstrap'
import { Archive, Edit2, Trash } from 'react-feather'
import { Link } from 'react-router-dom'
import NubraTooltip from '../../../components/@nubra-tooltip/NubraTooltip'
//Images
import avatar1 from '../../../Assets/dist/img/avatar1.jpg';
import avatar2 from '../../../Assets/dist/img/avatar2.jpg';
import avatar3 from '../../../Assets/dist/img/avatar3.jpg';
import avatar4 from '../../../Assets/dist/img/avatar4.jpg';
import avatar5 from '../../../Assets/dist/img/avatar5.jpg';
import avatar6 from '../../../Assets/dist/img/avatar6.jpg';
const BasicExample = () => {
return (
<Table responsive borderless className="nowrap table-advance table-action-hover table-fc-fixed table-lc-fixed">
<thead>
<tr>
<th className="mnw-200p">Name</th>
<th className="mnw-250p">Email address</th>
<th className="mnw-200p">Phone</th>
<th>Tags</th>
</tr>
</thead>
<tbody>
<tr>
<td className="text-truncate">
<div className="media align-items-center">
<div className="media-head me-3">
<div className="avatar avatar-xs">
<img src={avatar1} alt="user" className="avatar-img" />
</div>
</div>
<div className="media-body mnw-0">
<a href="#some" className="table-link-text link-high-em text-truncate mb-0">Kim L. Gonzales</a>
</div>
</div>
</td>
<td className="text-truncate">JamesDJames@jourrapide.com</td>
<td className="text-truncate">+91-24-3432-1567</td>
<td><span className="badge badge-lg badge-light">Collaboration</span>
<div className="table-action">
<Link to="#" className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Archived" >
<span className="icon">
<span className="feather-icon">
<Archive />
</span>
</span>
</NubraTooltip>
</Link>
<Link className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Edit" >
<span className="icon">
<span className="feather-icon">
<Edit2 />
</span>
</span>
</NubraTooltip>
</Link>
<Link className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Delete" >
<span className="icon">
<span className="feather-icon">
<Trash />
</span>
</span>
</NubraTooltip>
</Link>
</div>
</td>
</tr>
<tr className="table-row-gap"><td /></tr>
<tr>
<td className="text-truncate">
<div className="media align-items-center">
<div className="media-head me-3">
<div className="avatar avatar-xs">
<img src={avatar2} alt="user" className="avatar-img" />
</div>
</div>
<div className="media-body mnw-0">
<a href="#some" className="table-link-text link-high-em text-truncate mb-0">Victoria Lee</a>
</div>
</div>
</td>
<td className="text-truncate">ScottMTennant@jourrapide.com</td>
<td className="text-truncate">+91-24-3432-1567</td>
<td><span className="badge badge-lg badge-light">Collaboration</span>
<div className="table-action">
<Link to="#" className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Archived" >
<span className="icon">
<span className="feather-icon">
<Archive />
</span>
</span>
</NubraTooltip>
</Link>
<Link className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Edit" >
<span className="icon">
<span className="feather-icon">
<Edit2 />
</span>
</span>
</NubraTooltip>
</Link>
<Link className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Delete" >
<span className="icon">
<span className="feather-icon">
<Trash />
</span>
</span>
</NubraTooltip>
</Link>
</div>
</td>
</tr>
<tr className="table-row-gap"><td /></tr>
<tr>
<td className="text-truncate">
<div className="media align-items-center">
<div className="media-head me-3">
<div className="avatar avatar-xs">
<img src={avatar3} alt="user" className="avatar-img" />
</div>
</div>
<div className="media-body mnw-0">
<a href="#some" className="table-link-text link-high-em text-truncate mb-0">Nancy Kauffman</a>
</div>
</div>
</td>
<td className="text-truncate">KevinCPiercy@armyspy.com</td>
<td className="text-truncate">+91-24-3432-1567</td>
<td><span className="badge badge-lg badge-light">Collaboration</span>
<div className="table-action">
<Link to="#" className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Archived" >
<span className="icon">
<span className="feather-icon">
<Archive />
</span>
</span>
</NubraTooltip>
</Link>
<Link className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Edit" >
<span className="icon">
<span className="feather-icon">
<Edit2 />
</span>
</span>
</NubraTooltip>
</Link>
<Link className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Delete" >
<span className="icon">
<span className="feather-icon">
<Trash />
</span>
</span>
</NubraTooltip>
</Link>
</div>
</td>
</tr>
<tr className="table-row-gap"><td /></tr>
<tr>
<td className="text-truncate">
<div className="media align-items-center">
<div className="media-head me-3">
<div className="avatar avatar-xs">
<img src={avatar4} alt="user" className="avatar-img" />
</div>
</div>
<div className="media-body mnw-0">
<a href="#some" className="table-link-text link-high-em text-truncate mb-0">Joseph Heintz</a>
</div>
</div>
</td>
<td className="text-truncate">BeverlyDEngman@dayrep.com</td>
<td className="text-truncate">+91-24-3432-1567</td>
<td><span className="badge badge-lg badge-light">Collaboration</span>
<div className="table-action">
<Link to="#" className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Archived" >
<span className="icon">
<span className="feather-icon">
<Archive />
</span>
</span>
</NubraTooltip>
</Link>
<Link className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Edit" >
<span className="icon">
<span className="feather-icon">
<Edit2 />
</span>
</span>
</NubraTooltip>
</Link>
<Link className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Delete" >
<span className="icon">
<span className="feather-icon">
<Trash />
</span>
</span>
</NubraTooltip>
</Link>
</div>
</td>
</tr>
<tr className="table-row-gap"><td /></tr>
<tr>
<td className="text-truncate">
<div className="media align-items-center">
<div className="media-head me-3">
<div className="avatar avatar-xs">
<img src={avatar5} alt="user" className="avatar-img" />
</div>
</div>
<div className="media-body mnw-0">
<a href="#some" className="table-link-text link-high-em text-truncate mb-0">Evelyn lee</a>
</div>
</div>
</td>
<td className="text-truncate">ThomasLMaitland@armyspy.com</td>
<td className="text-truncate">+91-24-3432-1567</td>
<td><span className="badge badge-lg badge-light">Collaboration</span>
<div className="table-action">
<Link to="#" className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Archived" >
<span className="icon">
<span className="feather-icon">
<Archive />
</span>
</span>
</NubraTooltip>
</Link>
<Link className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Edit" >
<span className="icon">
<span className="feather-icon">
<Edit2 />
</span>
</span>
</NubraTooltip>
</Link>
<Link className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Delete" >
<span className="icon">
<span className="feather-icon">
<Trash />
</span>
</span>
</NubraTooltip>
</Link>
</div>
</td>
</tr>
<tr className="table-row-gap"><td /></tr>
<tr>
<td className="text-truncate">
<div className="media align-items-center">
<div className="media-head me-3">
<div className="avatar avatar-xs">
<img src={avatar6} alt="user" className="avatar-img" />
</div>
</div>
<div className="media-body mnw-0">
<a href="#some" className="table-link-text link-high-em text-truncate mb-0">Scott M. Tennant</a>
</div>
</div>
</td>
<td className="text-truncate">DanielMKinney@armyspy.com</td>
<td className="text-truncate">+91-24-3432-1567</td>
<td><span className="badge badge-lg badge-light">Collaboration</span>
<div className="table-action">
<Link to="#" className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Archived" >
<span className="icon">
<span className="feather-icon">
<Archive />
</span>
</span>
</NubraTooltip>
</Link>
<Link className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Edit" >
<span className="icon">
<span className="feather-icon">
<Edit2 />
</span>
</span>
</NubraTooltip>
</Link>
<Link className="btn btn-icon btn-flush-dark btn-rounded flush-soft-hover">
<NubraTooltip placement="top" title="Delete" >
<span className="icon">
<span className="feather-icon">
<Trash />
</span>
</span>
</NubraTooltip>
</Link>
</div>
</td>
</tr>
</tbody>
</Table>
);
};
export default BasicExample;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.