Basic Datatables
const BasicTable = () => {
const columns = [
{
name: <Input className="form-check-input fs-15" type="checkbox" name="checkAll" value="option1" />,
cell: () => (
<input className="form-check-input fs-15" type="checkbox" name="checkAll" value="option1" />
),
},
{
name: <span className='font-weight-bold fs-13'>SR No.</span>,
selector: row => row.srNo,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>ID</span>,
selector: row => row.id,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Purchase ID</span>,
selector: row => row.purchaseId,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Title</span>,
selector: row => (
Scroll - Vertical
const ScrollVertical = () => {
const columns = [
{
name: <span className='font-weight-bold fs-13'>ID</span>,
selector: row => row.ScrVerId,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Project</span>,
selector: row => row.project,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Task</span>,
selector: row => (<Link to="#!">{row.task}</Link>),
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Client Name</span>,
selector: row => row.clientName,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Assigned To</span>,
sortable: true,
selector: (cell) => {
return (
<React.Fragment>
<div className="avatar-group">
{cell.assigned.map((item, index) => (
<Link key={index} to="#" className="avatar-group-item">
<img src={item} alt="" className="rounded-circle avatar-xxs" />
</Link>
))}
</div>
</React.Fragment>
);
},
},
{
name: <span className='font-weight-bold fs-13'>Due Date</span>,
selector: row => row.dueDate,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Status</span>,
sortable: true,
selector: (cell) => {
switch (cell.status) {
case "Re-open":
return <span className="badge badge-soft-info"> {cell.status} </span>;
case "On-Hold":
return <span className="badge badge-soft-secondary"> {cell.status} </span>;
case "Closed":
return <span className="badge badge-soft-danger"> {cell.status} </span>;
case "Inprogress":
return <span className="badge badge-soft-warning"> {cell.status} </span>;
case "Open":
return <span className="badge badge-soft-primary"> {cell.status} </span>;
case "New":
return <span className="badge badge-soft-success"> {cell.status} </span>;
default:
return <span className="badge badge-soft-success"> {cell.status} </span>;
}
},
},
{
name: <span className='font-weight-bold fs-13'>Priority</span>,
sortable: true,
selector: (cell) => {
switch (cell.priority) {
case "High":
return <span className="badge bg-danger"> {cell.priority} </span>;
case "Medium":
return <span className="badge bg-info"> {cell.priority} </span>;
case "Low":
return <span className="badge bg-success"> {cell.priority} </span>;
default:
return <span className="badge bg-danger"> {cell.priority} </span>;
}
},
},
];
const data = [
{
ScrVerId: "VLZ-452",
project: "Symox v1.0.0",
task: "Add Dynamic Contact List",
clientName: "RH Nichols",
assigned: [avatar3],
dueDate: "03 Oct, 2021",
status: "Re-open",
priority: "High",
},
{
ScrVerId: "VLZ-453",
project: "Doot - Chat App Template",
task: "Additional Calendar",
clientName: "Diana Kohler",
assigned: [avatar4, avatar5],
dueDate: "05 Oct, 2021",
status: "On-Hold",
priority: "Medium",
},
{
ScrVerId: "VLZ-454",
project: "Qexal - Landing Page",
task: "Make a creating an account profile",
clientName: "David Nichols",
assigned: [avatar6, avatar7, avatar8],
dueDate: "27 April, 2022",
status: "Closed",
priority: "Low",
},
{
ScrVerId: "VLZ-455",
project: "Dorsin - Landing Page",
task: "Apologize for shopping Error!",
clientName: "Tonya Noble",
assigned: [avatar6, avatar7],
dueDate: "14 June, 2021",
status: "Inprogress",
priority: "Medium",
},
{
ScrVerId: "VLZ-456",
project: "Minimal - v2.1.0",
task: "Support for theme",
clientName: "Donald Palmer",
assigned: [avatar2],
dueDate: "25 June, 2021",
status: "Closed",
priority: "Low",
},
{
ScrVerId: "VLZ-457",
project: "Dason - v1.0.0",
task: "Benner design for FB & Twitter",
clientName: "Jennifer Carter",
assigned: [avatar5, avatar6, avatar7, avatar8],
dueDate: "14 Aug, 2021",
status: "Inprogress",
priority: "Medium",
},
{
ScrVerId: "VLZ-458",
project: "Velzon v1.6.0",
task: "Add datatables",
clientName: "James Morris",
assigned: [avatar4, avatar5],
dueDate: "12 March, 2022",
status: "Open",
priority: "High",
},
{
ScrVerId: "VLZ-460",
project: "Skote v2.0.0",
task: "Support for theme",
clientName: "Nancy Martino",
assigned: [avatar3, avatar10, avatar9],
dueDate: "28 Feb, 2022",
status: "On-Hold",
priority: "Low",
},
{
ScrVerId: "VLZ-461",
project: "Velzon v1.0.0",
task: "Form submit issue",
clientName: "Grace Coles",
assigned: [avatar5, avatar10, avatar9],
dueDate: "07 Jan, 2022",
status: "New",
priority: "High",
},
{
ScrVerId: "VLZ-462",
project: "Minimal - v2.2.0",
task: "Edit customer testimonial",
clientName: "Freda",
assigned: [avatar2],
dueDate: "16 Aug, 2021",
status: "Closed",
priority: "Medium",
},
{
ScrVerId: "VLZ-454",
project: "Qexal - Landing Page",
task: "Make a creating an account profile",
clientName: "David Nichols",
assigned: [avatar6, avatar7, avatar8],
dueDate: "27 April, 2022",
status: "Closed",
priority: "Low",
},
{
ScrVerId: "VLZ-455",
project: "Dorsin - Landing Page",
task: "Apologize for shopping Error!",
clientName: "Tonya Noble",
assigned: [avatar6, avatar7],
dueDate: "14 June, 2021",
status: "Inprogress",
priority: "Medium",
},
{
ScrVerId: "VLZ-456",
project: "Minimal - v2.1.0",
task: "Support for theme",
clientName: "Donald Palmer",
assigned: [avatar2],
dueDate: "25 June, 2021",
status: "Closed",
priority: "Low",
},
{
ScrVerId: "VLZ-457",
project: "Dason - v1.0.0",
task: "Benner design for FB & Twitter",
clientName: "Jennifer Carter",
assigned: [avatar5, avatar6, avatar7, avatar8],
dueDate: "14 Aug, 2021",
status: "Inprogress",
priority: "Medium",
},
];
return (
<DataTable
fixedHeader
fixedHeaderScrollHeight="300px"
columns={columns}
data={data}
/>
);
};
Scroll - Horizontal
const ScrollHorizontal = () => {
const columns = [
{
name: <Input className="form-check-input fs-15" type="checkbox" name="checkAll" value="option1" />,
cell: () => (
<input className="form-check-input fs-15" type="checkbox" name="checkAll" value="option1" />
),
},
{
name: <span className='font-weight-bold fs-13'>SR No.</span>,
selector: row => row.srNo,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>ID</span>,
selector: row => row.id,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Purchase ID</span>,
selector: row => row.purchaseId,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Title</span>,
selector: row => (<Link to="#!">{row.title}</Link>),
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>User</span>,
selector: row => row.user,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Assigned To</span>,
selector: row => row.assigned,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Create By</span>,
selector: row => row.createdBy,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Create Date</span>,
selector: row => row.createDate,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Status</span>,
sortable: true,
selector: (cell) => {
switch (cell.status) {
case "Re-open":
return <span className="badge badge-soft-info"> {cell.status} </span>;
case "On-Hold":
return <span className="badge badge-soft-secondary"> {cell.status} </span>;
case "Closed":
return <span className="badge badge-soft-danger"> {cell.status} </span>;
case "Inprogress":
return <span className="badge badge-soft-warning"> {cell.status} </span>;
case "Open":
return <span className="badge badge-soft-primary"> {cell.status} </span>;
case "New":
return <span className="badge badge-soft-success"> {cell.status} </span>;
default:
return <span className="badge badge-soft-success"> {cell.status} </span>;
}
},
},
{
name: <span className='font-weight-bold fs-13'>Priority</span>,
sortable: true,
selector: (cell) => {
switch (cell.priority) {
case "High":
return <span className="badge bg-danger"> {cell.priority} </span>;
case "Medium":
return <span className="badge bg-info"> {cell.priority} </span>;
case "Low":
return <span className="badge bg-success"> {cell.priority} </span>;
default:
return <span className="badge bg-danger"> {cell.priority} </span>;
}
},
},
{
name: <span className='font-weight-bold fs-13'>Action</span>,
sortable: true,
cell: () => {
return (
<UncontrolledDropdown className="dropdown d-inline-block">
<DropdownToggle className="btn btn-soft-secondary btn-sm" tag="button">
<i className="ri-more-fill align-middle"></i>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-end">
<DropdownItem href="#!"><i className="ri-eye-fill align-bottom me-2 text-muted"></i>View</DropdownItem>
<DropdownItem className='edit-item-btn'><i className="ri-pencil-fill align-bottom me-2 text-muted"></i>Edit</DropdownItem>
<DropdownItem className='remove-item-btn'> <i className="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete </DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
);
},
},
];
const data = [
{
srNo: "01",
id: "VLZ-452",
purchaseId: "VLZ1400087402",
title: "Post launch reminder/ post list",
user: "Joseph Parker",
assigned: "Alexis Clarke",
createdBy: "Joseph Parker",
createDate: "03 Oct, 2021",
status: "Re-open",
priority: "High",
},
{
srNo: "02",
id: "VLZ-453",
purchaseId: "VLZ1400087425",
title: "Additional Calendar",
user: "Diana Kohler",
assigned: "Admin",
createdBy: "Mary Rucker",
createDate: "05 Oct, 2021",
status: "On-Hold",
priority: "Medium",
},
{
srNo: "03",
id: "VLZ-454",
purchaseId: "VLZ1400087438",
title: "Make a creating an account profile",
user: "Tonya Noble",
assigned: "Admin",
createdBy: "Tonya Noble",
createDate: "27 April, 2022",
status: "Closed",
priority: "Low",
},
{
srNo: "04",
id: "VLZ-455",
purchaseId: "VLZ1400087748",
title: "Apologize for shopping Error!",
user: "Joseph Parker",
assigned: "Alexis Clarke",
createdBy: "Joseph Parker",
createDate: "14 June, 2021",
status: "Inprogress",
priority: "Medium",
},
{
srNo: "05",
id: "VLZ-456",
purchaseId: "VLZ1400087547",
title: "Support for theme",
user: "Donald Palmer",
assigned: "Admin",
createdBy: "Donald Palmer",
createDate: "25 June, 2021",
status: "Closed",
priority: "Low",
},
{
srNo: "07",
id: "VLZ-458",
purchaseId: "VLZ1400087785",
title: "Change email option process",
user: "James Morris",
assigned: "Admin",
createdBy: "James Morris",
createDate: "12 March, 2022",
status: "Open",
priority: "High",
},
{
srNo: "08",
id: "VLZ-460",
purchaseId: "VLZ1400087745",
title: "Support for theme",
user: "Nathan Cole",
assigned: "Nancy Martino",
createdBy: "Nathan Cole",
createDate: "28 Feb, 2022",
status: "On-Hold",
priority: "Low",
},
{
srNo: "09",
id: "VLZ-461",
purchaseId: "VLZ1400087179",
title: "Form submit issue",
user: "Grace Coles",
assigned: "Admin",
createdBy: "Grace Coles",
createDate: "07 Jan, 2022",
status: "New",
priority: "High",
},
{
srNo: "10",
id: "VLZ-462",
purchaseId: "VLZ140008856",
title: "Edit customer testimonial",
user: "Freda",
assigned: "Alexis Clarke",
createdBy: "Freda",
createDate: "16 Aug, 2021",
status: "Closed",
priority: "Medium",
},
{
srNo: "11",
id: "VLZ-463",
purchaseId: "VLZ1400078031",
title: "Ca i have an e-copy invoice",
user: "Williams",
assigned: "Admin",
createdBy: "Williams",
createDate: "24 Feb, 2022",
status: "Open",
priority: "Low",
},
{
srNo: "12",
id: "VLZ-464",
purchaseId: "VLZ1400087416",
title: "Brand logo design",
user: "Richard V.",
assigned: "Admin",
createdBy: "Richard V.",
createDate: "16 March, 2021",
status: "Inprogress",
priority: "High",
},
{
srNo: "13",
id: "VLZ-466",
purchaseId: "VLZ1400089015",
title: "Issue with finding information about order ?",
user: "Olive Gunther",
assigned: "Alexis Clarke",
createdBy: "Schaefer",
createDate: "32 March, 2022",
status: "New",
priority: "High",
},
{
srNo: "14",
id: "VLZ-467",
purchaseId: "VLZ1400090324",
title: "Make a creating an account profile",
user: "Edwin",
assigned: "Admin",
createdBy: "Edwin",
createDate: "05 April, 2022",
status: "Inprogress",
priority: "Low",
},
];
return (
<DataTable
columns={columns}
data={data}
pagination
/>
);
};
Alternative Pagination
const AlternativePagination = () => {
const columns = [
{
name: <span className='font-weight-bold fs-13'>SR No.</span>,
selector: row => row.srNo,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Currency</span>,
sortable: true,
selector: (cell) => {
return (
<React.Fragment>
<div className="d-flex align-items-center fw-medium" >
<img src={cell.currency[0]} alt="" className="avatar-xxs me-2" />
<Link to="#" className="currency_name">{cell.currency[1]}</Link>
</div>
</React.Fragment>);
},
},
{
name: <span className='font-weight-bold fs-13'>Price</span>,
selector: row => row.price,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Pairs</span>,
selector: row => row.pairs,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>24 High</span>,
selector: row => row.high,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>24 Low</span>,
selector: row => row.low,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Market Volume</span>,
selector: row => row.marketVolume,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Volume %</span>,
sortable: true,
selector: (cell) => {
return (
<h6 className={"fs-13 mb-0 text-" + cell.volumeClass} > <i className={"align-middle me-1 " + cell.icon}></i>{cell.volume}</h6>
);
},
},
{
name: <span className='font-weight-bold fs-13'>Action</span>,
sortable: true,
cell: () => {
return (<button className="btn btn-sm btn-soft-info">Trade Now</button>);
},
},
];
const data = [
{
srNo: "01",
currency: [btc, "Bitcoin (BTC)"],
price: "$47,071.60",
pairs: "BTC/USD",
high: "$28,722.76",
low: "$68,789.63",
marketVolume: "$888,411,910",
volume: "1.50%",
icon: "mdi mdi-trending-up",
volumeClass: "success"
},
{
srNo: "02",
currency: [eth, "Ethereum (ETH)"],
price: "$3,813.14",
pairs: "ETH/USDT",
high: "$4,036.24",
low: "$3,588.14",
marketVolume: "$314,520,675",
volume: "0.42%",
icon: "mdi mdi-trending-down",
volumeClass: "danger"
},
{
srNo: "03",
currency: [ltc, "Litecoin (LTC)"],
price: "$149.65",
pairs: "LTC/USDT",
high: "$412.96",
low: "$104.33",
marketVolume: "$314,520,675",
volume: "0.89%",
icon: "mdi mdi-trending-up",
volumeClass: "success"
},
{
srNo: "04",
currency: [xmr, "Monero (XMR)"],
price: "$17,491.16",
pairs: "XRM/USDT",
high: "$31,578.35",
low: "$8691.75",
marketVolume: "$9,847,327",
volume: "1.92%",
icon: "mdi mdi-trending-up",
volumeClass: "success"
},
{
srNo: "05",
currency: [ant, "Aragon (ANT)"],
price: "$172.93",
pairs: "SOL/USD",
high: "$178.37",
low: "$172.3",
marketVolume: "$40,559,274",
volume: "2.87%",
icon: "mdi mdi-trending-down",
volumeClass: "danger"
},
{
srNo: "06",
currency: [sol, "Solana (SOL)"],
price: "$17,491.16",
pairs: "XRM/USDT",
high: "$31,578.35",
low: "$8691.75",
marketVolume: "$9,847,327",
volume: "1.92%",
icon: "mdi mdi-trending-up",
volumeClass: "success"
},
{
srNo: "07",
currency: [fil, "Filecoin (FIL)"],
price: "$13.31",
pairs: "ANT/USD",
high: "$13.85",
low: "$12.53",
marketVolume: "$156,209,195.18",
volume: "3.96%",
icon: "mdi mdi-trending-up",
volumeClass: "success"
},
{
srNo: "08",
currency: [fil, "Filecoin (FIL)"],
price: "$35.21",
pairs: "FIL/USD",
high: "$36.41",
low: "$35.03",
marketVolume: "$374,618,945.51",
volume: "0.84%",
icon: "mdi mdi-trending-down",
volumeClass: "danger"
},
{
srNo: "09",
currency: [aave, "Aave (AAVE)"],
price: "$275.47",
pairs: "AAVE/USDT",
high: "$277.11",
low: "$255.01",
marketVolume: "$156,209,195.18",
volume: "8.20%",
icon: "mdi mdi-trending-up",
volumeClass: "success"
},
{
srNo: "10",
currency: [ada, "Cardano (ADA)"],
price: "$1.35",
pairs: "ADA/USD",
high: "$1.39",
low: "$1.32",
marketVolume: "$880,387,980.14",
volume: "0.42%",
icon: "mdi mdi-trending-down",
volumeClass: "danger"
},
{
srNo: "11",
currency: [fil, "Filecoin (FIL)"],
price: "$35.21",
pairs: "FIL/USD",
high: "$36.41",
low: "$35.03",
marketVolume: "$374,618,945.51",
volume: "0.84%",
icon: "mdi mdi-trending-down",
volumeClass: "danger"
},
{
srNo: "12",
currency: [aave, "Aave (AAVE)"],
price: "$275.47",
pairs: "AAVE/USDT",
high: "$277.11",
low: "$255.01",
marketVolume: "$156,209,195.18",
volume: "8.20%",
icon: "mdi mdi-trending-up",
volumeClass: "success"
},
{
srNo: "13",
currency: [ada, "Cardano (ADA)"],
price: "$1.35",
pairs: "ADA/USD",
high: "$1.39",
low: "$1.32",
marketVolume: "$880,387,980.14",
volume: "0.42%",
icon: "mdi mdi-trending-down",
volumeClass: "danger"
},
];
return (
<DataTable
columns={columns}
data={data}
pagination
/>
);
};
Fixed Header Datatables
const FixedHeaderDatatables = () => {
const columns = [
{
name: <Input className="form-check-input fs-15" type="checkbox" name="checkAll" value="option1" />,
cell: () => (
<input className="form-check-input fs-15" type="checkbox" name="checkAll" value="option1" />
),
},
{
name: <span className='font-weight-bold fs-13'>SR No.</span>,
selector: row => row.srNo,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>ID</span>,
selector: row => row.FixHeadId,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Purchase ID</span>,
selector: row => row.purchaseId,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Title</span>,
selector: row => (<Link to="#!">{row.title}</Link>),
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>User</span>,
selector: row => row.user,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Assigned To</span>,
selector: row => row.assigned,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Create By</span>,
selector: row => row.createdBy,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Create Date</span>,
selector: row => row.createDate,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Status</span>,
sortable: true,
selector: (cell) => {
switch (cell.status) {
case "Re-open":
return <span className="badge badge-soft-info"> {cell.status} </span>;
case "On-Hold":
return <span className="badge badge-soft-secondary"> {cell.status} </span>;
case "Closed":
return <span className="badge badge-soft-danger"> {cell.status} </span>;
case "Inprogress":
return <span className="badge badge-soft-warning"> {cell.status} </span>;
case "Open":
return <span className="badge badge-soft-primary"> {cell.status} </span>;
case "New":
return <span className="badge badge-soft-success"> {cell.status} </span>;
default:
return <span className="badge badge-soft-success"> {cell.status} </span>;
}
},
},
{
name: <span className='font-weight-bold fs-13'>Priority</span>,
sortable: true,
selector: (cell) => {
switch (cell.priority) {
case "High":
return <span className="badge bg-danger"> {cell.priority} </span>;
case "Medium":
return <span className="badge bg-info"> {cell.priority} </span>;
case "Low":
return <span className="badge bg-success"> {cell.priority} </span>;
default:
return <span className="badge bg-danger"> {cell.priority} </span>;
}
},
},
{
name: <span className='font-weight-bold fs-13'>Action</span>,
sortable: true,
cell: () => {
return (
<UncontrolledDropdown className="dropdown d-inline-block">
<DropdownToggle className="btn btn-soft-secondary btn-sm" tag="button">
<i className="ri-more-fill align-middle"></i>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-end">
<DropdownItem href="#!"><i className="ri-eye-fill align-bottom me-2 text-muted"></i>View</DropdownItem>
<DropdownItem className='edit-item-btn'><i className="ri-pencil-fill align-bottom me-2 text-muted"></i>Edit</DropdownItem>
<DropdownItem className='remove-item-btn'> <i className="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete </DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
);
},
},
];
const data = [
{
srNo: "01",
FixHeadId: "VLZ-452",
purchaseId: "VLZ1400087402",
title: "Post launch reminder/ post list",
user: "Joseph Parker",
assigned: "Alexis Clarke",
createdBy: "Joseph Parker",
createDate: "03 Oct, 2021",
status: "Re-open",
priority: "High",
},
{
srNo: "02",
FixHeadId: "VLZ-453",
purchaseId: "VLZ1400087425",
title: "Additional Calendar",
user: "Diana Kohler",
assigned: "Admin",
createdBy: "Mary Rucker",
createDate: "05 Oct, 2021",
status: "On-Hold",
priority: "Medium",
},
{
srNo: "03",
FixHeadId: "VLZ-454",
purchaseId: "VLZ1400087438",
title: "Make a creating an account profile",
user: "Tonya Noble",
assigned: "Admin",
createdBy: "Tonya Noble",
createDate: "27 April, 2022",
status: "Closed",
priority: "Low",
},
{
srNo: "04",
FixHeadId: "VLZ-455",
purchaseId: "VLZ1400087748",
title: "Apologize for shopping Error!",
user: "Joseph Parker",
assigned: "Alexis Clarke",
createdBy: "Joseph Parker",
createDate: "14 June, 2021",
status: "Inprogress",
priority: "Medium",
},
{
srNo: "05",
FixHeadId: "VLZ-456",
purchaseId: "VLZ1400087547",
title: "Support for theme",
user: "Donald Palmer",
assigned: "Admin",
createdBy: "Donald Palmer",
createDate: "25 June, 2021",
status: "Closed",
priority: "Low",
},
{
srNo: "06",
FixHeadId: "VLZ-457",
purchaseId: "VLZ1400087245",
title: "Benner design for FB & Twitter",
user: "Mary Rucker",
assigned: "Jennifer Carter",
createdBy: "Mary Rucker",
createDate: "14 Aug, 2021",
status: "Inprogress",
priority: "Medium",
},
{
srNo: "07",
FixHeadId: "VLZ-458",
purchaseId: "VLZ1400087785",
title: "Change email option process",
user: "James Morris",
assigned: "Admin",
createdBy: "James Morris",
createDate: "12 March, 2022",
status: "Open",
priority: "High",
},
{
srNo: "08",
FixHeadId: "VLZ-460",
purchaseId: "VLZ1400087745",
title: "Support for theme",
user: "Nathan Cole",
assigned: "Nancy Martino",
createdBy: "Nathan Cole",
createDate: "28 Feb, 2022",
status: "On-Hold",
priority: "Low",
},
{
srNo: "09",
FixHeadId: "VLZ-461",
purchaseId: "VLZ1400087179",
title: "Form submit issue",
user: "Grace Coles",
assigned: "Admin",
createdBy: "Grace Coles",
createDate: "07 Jan, 2022",
status: "New",
priority: "High",
},
{
srNo: "10",
FixHeadId: "VLZ-462",
purchaseId: "VLZ140008856",
title: "Edit customer testimonial",
user: "Freda",
assigned: "Alexis Clarke",
createdBy: "Freda",
createDate: "16 Aug, 2021",
status: "Closed",
priority: "Medium",
},
{
srNo: "11",
FixHeadId: "VLZ-463",
purchaseId: "VLZ1400078031",
title: "Ca i have an e-copy invoice",
user: "Williams",
assigned: "Admin",
createdBy: "Williams",
createDate: "24 Feb, 2022",
status: "Open",
priority: "Low",
},
{
srNo: "12",
FixHeadId: "VLZ-464",
purchaseId: "VLZ1400087416",
title: "Brand logo design",
user: "Richard V.",
assigned: "Admin",
createdBy: "Richard V.",
createDate: "16 March, 2021",
status: "Inprogress",
priority: "High",
},
{
srNo: "13",
FixHeadId: "VLZ-466",
purchaseId: "VLZ1400089015",
title: "Issue with finding information about order ?",
user: "Olive Gunther",
assigned: "Alexis Clarke",
createdBy: "Schaefer",
createDate: "32 March, 2022",
status: "New",
priority: "High",
},
{
srNo: "14",
FixHeadId: "VLZ-467",
purchaseId: "VLZ1400090324",
title: "Make a creating an account profile",
user: "Edwin",
assigned: "Admin",
createdBy: "Edwin",
createDate: "05 April, 2022",
status: "Inprogress",
priority: "Low",
},
];
return (
<DataTable
columns={columns}
data={data}
pagination
/>
);
};
Modal Data Datatables
const ModalDataDatatables = () => {
const columns = [
{
name: <Input className="form-check-input fs-15" type="checkbox" name="checkAll" value="option1" />,
cell: () => (
<input className="form-check-input fs-15" type="checkbox" name="checkAll" value="option1" />
),
},
{
name: <span className='font-weight-bold fs-13'>SR No.</span>,
selector: row => row.srNo,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>ID</span>,
selector: row => row.modalId,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Purchase ID</span>,
selector: row => row.purchaseId,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Title</span>,
selector: row => (<Link to="#!">{row.title}</Link>),
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>User</span>,
selector: row => row.user,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Assigned To</span>,
selector: row => row.assigned,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Create By</span>,
selector: row => row.createdBy,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Create Date</span>,
selector: row => row.createDate,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Status</span>,
sortable: true,
selector: (cell) => {
switch (cell.status) {
case "Re-open":
return <span className="badge badge-soft-info"> {cell.status} </span>;
case "On-Hold":
return <span className="badge badge-soft-secondary"> {cell.status} </span>;
case "Closed":
return <span className="badge badge-soft-danger"> {cell.status} </span>;
case "Inprogress":
return <span className="badge badge-soft-warning"> {cell.status} </span>;
case "Open":
return <span className="badge badge-soft-primary"> {cell.status} </span>;
case "New":
return <span className="badge badge-soft-success"> {cell.status} </span>;
default:
return <span className="badge badge-soft-success"> {cell.status} </span>;
}
},
},
{
name: <span className='font-weight-bold fs-13'>Priority</span>,
sortable: true,
selector: (cell) => {
switch (cell.priority) {
case "High":
return <span className="badge bg-danger"> {cell.priority} </span>;
case "Medium":
return <span className="badge bg-info"> {cell.priority} </span>;
case "Low":
return <span className="badge bg-success"> {cell.priority} </span>;
default:
return <span className="badge bg-danger"> {cell.priority} </span>;
}
},
},
{
name: <span className='font-weight-bold fs-13'>Action</span>,
sortable: true,
cell: () => {
return (
<UncontrolledDropdown className="dropdown d-inline-block">
<DropdownToggle className="btn btn-soft-secondary btn-sm" tag="button">
<i className="ri-more-fill align-middle"></i>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-end">
<DropdownItem href="#!"><i className="ri-eye-fill align-bottom me-2 text-muted"></i>View</DropdownItem>
<DropdownItem className='edit-item-btn'><i className="ri-pencil-fill align-bottom me-2 text-muted"></i>Edit</DropdownItem>
<DropdownItem className='remove-item-btn'> <i className="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete </DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
);
},
},
];
const data = [
{
srNo: "01",
modalId: "VLZ-452",
purchaseId: "VLZ1400087402",
title: "Post launch reminder/ post list",
user: "Joseph Parker",
assigned: "Alexis Clarke",
createdBy: "Joseph Parker",
createDate: "03 Oct, 2021",
status: "Re-open",
priority: "High",
},
{
srNo: "02",
modalId: "VLZ-453",
purchaseId: "VLZ1400087425",
title: "Additional Calendar",
user: "Diana Kohler",
assigned: "Admin",
createdBy: "Mary Rucker",
createDate: "05 Oct, 2021",
status: "On-Hold",
priority: "Medium",
},
{
srNo: "03",
modalId: "VLZ-454",
purchaseId: "VLZ1400087438",
title: "Make a creating an account profile",
user: "Tonya Noble",
assigned: "Admin",
createdBy: "Tonya Noble",
createDate: "27 April, 2022",
status: "Closed",
priority: "Low",
},
{
srNo: "04",
modalId: "VLZ-455",
purchaseId: "VLZ1400087748",
title: "Apologize for shopping Error!",
user: "Joseph Parker",
assigned: "Alexis Clarke",
createdBy: "Joseph Parker",
createDate: "14 June, 2021",
status: "Inprogress",
priority: "Medium",
},
{
srNo: "05",
modalId: "VLZ-456",
purchaseId: "VLZ1400087547",
title: "Support for theme",
user: "Donald Palmer",
assigned: "Admin",
createdBy: "Donald Palmer",
createDate: "25 June, 2021",
status: "Closed",
priority: "Low",
},
{
srNo: "06",
modalId: "VLZ-457",
purchaseId: "VLZ1400087245",
title: "Benner design for FB & Twitter",
user: "Mary Rucker",
assigned: "Jennifer Carter",
createdBy: "Mary Rucker",
createDate: "14 Aug, 2021",
status: "Inprogress",
priority: "Medium",
},
{
srNo: "07",
modalId: "VLZ-458",
purchaseId: "VLZ1400087785",
title: "Change email option process",
user: "James Morris",
assigned: "Admin",
createdBy: "James Morris",
createDate: "12 March, 2022",
status: "Open",
priority: "High",
},
{
srNo: "08",
modalId: "VLZ-460",
purchaseId: "VLZ1400087745",
title: "Support for theme",
user: "Nathan Cole",
assigned: "Nancy Martino",
createdBy: "Nathan Cole",
createDate: "28 Feb, 2022",
status: "On-Hold",
priority: "Low",
},
{
srNo: "09",
modalId: "VLZ-461",
purchaseId: "VLZ1400087179",
title: "Form submit issue",
user: "Grace Coles",
assigned: "Admin",
createdBy: "Grace Coles",
createDate: "07 Jan, 2022",
status: "New",
priority: "High",
},
{
srNo: "10",
modalId: "VLZ-462",
purchaseId: "VLZ140008856",
title: "Edit customer testimonial",
user: "Freda",
assigned: "Alexis Clarke",
createdBy: "Freda",
createDate: "16 Aug, 2021",
status: "Closed",
priority: "Medium",
},
{
srNo: "11",
modalId: "VLZ-463",
purchaseId: "VLZ1400078031",
title: "Ca i have an e-copy invoice",
user: "Williams",
assigned: "Admin",
createdBy: "Williams",
createDate: "24 Feb, 2022",
status: "Open",
priority: "Low",
},
{
srNo: "12",
modalId: "VLZ-464",
purchaseId: "VLZ1400087416",
title: "Brand logo design",
user: "Richard V.",
assigned: "Admin",
createdBy: "Richard V.",
createDate: "16 March, 2021",
status: "Inprogress",
priority: "High",
},
{
srNo: "13",
modalId: "VLZ-466",
purchaseId: "VLZ1400089015",
title: "Issue with finding information about order ?",
user: "Olive Gunther",
assigned: "Alexis Clarke",
createdBy: "Schaefer",
createDate: "32 March, 2022",
status: "New",
priority: "High",
},
{
srNo: "14",
modalId: "VLZ-467",
purchaseId: "VLZ1400090324",
title: "Make a creating an account profile",
user: "Edwin",
assigned: "Admin",
createdBy: "Edwin",
createDate: "05 April, 2022",
status: "Inprogress",
priority: "Low",
},
];
return (
<DataTable
columns={columns}
data={data}
pagination
/>
);
};
Ajax Datatables
const AjaxDatatables = () => {
const columns = [
{
name: <span className='font-weight-bold fs-13'>Name</span>,
selector: row => row.name,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Position</span>,
selector: row => row.position,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Office</span>,
selector: row => row.office,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Extn.</span>,
selector: row => row.office,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Start date</span>,
selector: row => row.startDate,
sortable: true
},
{
name: <span className='font-weight-bold fs-13'>Salary</span>,
selector: row => row.salary,
sortable: true
},
];
const data = useMemo(() => [
{
id: 1,
name: "Tiger Nixon",
position: "System Architect",
office: "Edinburgh",
extn: "5421",
startDate: "2011/04/25",
salary: "$320,800"
},
{
id: 2,
name: "Garrett Winters",
position: "Accountant",
office: "Tokyo",
extn: "8422",
startDate: "2011/07/25",
salary: "$170,750"
},
{
id: 3,
name: "Ashton Cox",
position: "Junior Technical Author",
office: "San Francisco",
extn: "1562",
startDate: "2009/01/12",
salary: "$86,000"
},
{
id: 4,
name: "Cedric Kelly",
position: "Senior Javascript Developer",
office: "Edinburgh",
extn: "6224",
startDate: "2012/03/29",
salary: "$433,060"
},
{
id: 5,
name: "Airi Satou",
position: "Accountant",
office: "Tokyo",
extn: "5407",
startDate: "2008/11/28",
salary: "$162,700"
},
{
id: 6,
name: "Brielle Williamson",
position: "Integration Specialist",
office: "New York",
extn: "4804",
startDate: "2012/12/02",
salary: "$372,000"
},
{
id: 7,
name: "Herrod Chandler",
position: "Sales Assistant",
office: "San Francisco",
extn: "9608",
startDate: "2012/08/06",
salary: "$137,500"
},
{
id: 8,
name: "Rhona Davidson",
position: "Integration Specialist",
office: "Tokyo",
extn: "6200",
startDate: "2010/10/14",
salary: "$327,900"
},
{
id: 9,
name: "Colleen Hurst",
position: "Javascript Developer",
office: "San Francisco",
extn: "2360",
startDate: "2009/09/15",
salary: "$205,500"
},
{
id: 10,
name: "Sonya Frost",
position: "Software Engineer",
office: "Edinburgh",
extn: "1667",
startDate: "2008/12/13",
salary: "$103,600",
},
{
id: 11,
name: "Jena Gaines",
position: "Office Manager",
office: "London",
extn: "3814",
startDate: "2008/12/19",
salary: "$90,560",
},
{
id: 12,
name: "Quinn Flynn",
position: "Support Lead",
office: "Edinburgh",
extn: "9497",
startDate: "2013/03/03",
salary: "$342,000",
},
{
id: 13,
name: "Charde Marshall",
position: "Regional Director",
office: "San Francisco",
extn: "6741",
startDate: "2008/10/16",
salary: "$470,600"
},
{
id: 14,
name: "Haley Kennedy",
position: "Senior Marketing Designer",
office: "London",
extn: "3597",
startDate: "2012/12/18",
salary: "$313,500"
},
{
id: 15,
name: "Tatyana Fitzpatrick",
position: "Regional Director",
office: "London",
extn: "1965",
startDate: "2010/03/17",
salary: "$385,750",
},
], []);
const [pending, setPending] = useState(true);
const [rows, setRows] = useState([]);
useEffect(() => {
const timeout = setTimeout(() => {
setRows(data);
setPending(false);
}, 2000);
return () => clearTimeout(timeout);
}, [data]);
return (
<DataTable
columns={columns}
pagination
data={rows}
progressPending={pending}
/>
);
};
