You can download a minimized version of the library or get the full source code at github.com.
Download source$ npm install coreui-tableДля корректной работы на странице необходимо наличие: Bootstrap 5, jquery
<div id="table-simple1"></div>
<div id="table-simple2"></div>
<script>
CoreUI.table.create({
columns: [
{ field: 'fname', label: 'First Name', width: '15%' },
{ field: 'lname', label: 'Last Name', width: '15%' },
{ field: 'email', label: 'Email' },
{ field: 'sdate', label: 'Start Date', width: 120, type: 'date' }
],
records: [
{ id: "1", fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '2023-09-03' },
{ id: "2", fname: 'Stuart', lname: 'Motzart', email: 'frank@gmail.com', sdate: '2023-04-03' },
{ id: "3", fname: 'Jin', lname: 'Franson', email: 'peter@gmail.com', sdate: '2023-02-03' }
]
}).render('table-simple');
</script>
<div id="table-empty"></div>
<script>
CoreUI.table.create({
columns: [
{ field: 'fname', label: 'First Name', width: '15%' },
{ field: 'lname', label: 'Last Name', width: '15%' },
{ field: 'email', label: 'Email' },
{ field: 'sdate', label: 'Start Date', width: 120, type: 'date' }
],
records: [ ]
}).render('table-empty');
</script>
<div id="table-controls-basic"></div>
<script>
CoreUI.table.create({
primaryKey: 'id',
header: [
{
type: 'out',
left: [
{ type: "button", content: "Select row 2", attr: { class: 'btn btn-secondary' },
onClick: function (event, table) {
table.selectRecord('2');
}
},
{ type: "button", content: "Unselect row 2", attr: { class: 'btn btn-secondary' },
onClick: function (event, table) {
table.unselectRecord('2');
}
}
]
}
],
columns: [
{ type: 'numbers', width: 10, attr: { class: "border-end text-end" } },
{ type: 'select' },
{ field: 'name', label: 'Name' },
{ field: 'email', label: 'Email', width: 150 },
{ field: 'sdate', label: 'Start Date', width: 150, type: 'date', format: 'DD.MM.YYYY' }
],
records: [
{ id: "1", name: 'Jane Doe', email: 'jdoe@gmail.com', sdate: '2023-09-03' },
{ id: "2", name: 'Stuart Motzart', email: 'frank@gmail.com', sdate: '2023-04-03' },
{ id: "3", name: 'Jin Franson', email: 'peter@gmail.com', sdate: '2023-02-03' }
]
}).render('table-controls-basic');
</script>
<div id="table-controls-advanced"></div>
<script>
CoreUI.table.create({
header: [
// Header row 1
{
type: 'out',
left: [
{ type: 'caption', title: 'Total orders', value: '1237' },
{ type: 'caption', title: 'Money received', value: '92 324 $', description: 'Description text' },
{ type: 'caption', title: 'Advertising expenses', value: '8.34 %' }
]
},
// Header row 2
{
type: 'in',
left: [
{ type: "custom", content: '<small class="text-body-secondary">My custom text</small>'},
],
right: [
{ type: "custom",
content:
'<div class="form-check pt-1">' +
'<input class="form-check-input" type="checkbox" id="gridCheck">' +
'<label class="form-check-label" for="gridCheck">Custom contol</label>' +
'</div>'
},
{ type: "custom",
content: function () {
let btn = $('<button type="button" class="btn btn-sm btn-secondary">Custom button</button>');
btn.click(function () {
console.log('custom button');
});
return btn;
}
}
]
}
],
columns: [
{ type: 'numbers', width: 10, attr: { class: "border-end text-end" } },
{ type: 'select' },
{ field: 'name', label: 'Name' },
{ field: 'email', label: 'Email', width: 150 },
{ field: 'sdate', label: 'Start Date', width: 150, type: 'date', format: 'DD.MM.YYYY' }
],
records: [
{ id: "1", name: 'Jane Doe', email: 'jdoe@gmail.com', sdate: '2023-09-03' },
{ id: "2", name: 'Stuart Motzart', email: 'frank@gmail.com', sdate: '2023-04-03' },
{ id: "3", name: 'Jin Franson', email: 'peter@gmail.com', sdate: '2023-02-03' }
]
}).render('table-controls-advanced');
</script>
<div id="table-ajax-records"></div>
<script>
CoreUI.table.create({
recordsRequest: {
url: 'data/records.json?page=[page]&count=[count]',
method: 'GET',
params: {
page: 'page',
count: 'count',
start: 'start',
end: 'end',
sort: 'sort',
search: 'search',
filter: 'filter',
},
},
maxHeight: 500,
header: [
{
type: 'out',
left: [
{
type: "button", content: "Reload", attr: {class: 'btn btn-sm btn-secondary'},
onClick: function (event, table) {
table.reload();
}
},
{
type: "button", content: "Lock", attr: {class: 'btn btn-sm btn-secondary'},
onClick: function (event, table) {
table.lock();
}
},
{
type: "button", content: "Unlock", attr: {class: 'btn btn-sm btn-secondary'},
onClick: function (event, table) {
table.unlock();
}
}
],
},
{
type: 'in',
left: [
{ type: 'total' }
]
},
],
columns: [
{ field: 'fname', label: 'First Name', },
{ field: 'lname', label: 'Last Name', },
{ field: 'sdate', label: 'Start Date', width: 120 }
]
}).render('table-ajax-records');
</script>
<div id="table-nowrap"></div>
<script>
CoreUI.table.create({
recordsRequest: {
url: 'data/many-records.json'
},
noWrap: false,
noWrapToggle: true,
maxHeight: 500,
columns: [
{ field: 'id', label: 'ID', width: 35 },
{ field: 'name', label: 'Name', minWidth: 140 },
{ field: 'about', label: 'About', minWidth: 400, noWrap: true },
{ field: 'address', label: 'Address', minWidth: 250, noWrap: true, noWrapToggle: false },
]
}).render('table-nowrap');
</script>
<div id="table-pages"></div>
<script>
CoreUI.table.create({
recordsRequest: {
url: 'data/pages/[page].json',
method: 'GET',
},
page: 1,
recordsPerPage: 15,
maxHeight: 400,
columns: [
{ type: 'numbers', width: 10, attr: { class: "bg-light border-end text-end" } },
{ field: 'fname', label: 'First Name', width: '25%' },
{ field: 'lname', label: 'Last Name', width: '25%' },
{ field: 'sdate', label: 'Start Date' }
],
header: [
{
type: 'in',
left: [
{ type: 'total' }
]
},
],
footer: [
{
type: 'in',
left: [
{ type: 'pages', count: 3, attr: { class: 'pagination-sm' } },
],
right: [
{ type: 'page_jump', attr: { class: 'input-group-sm' } },
{ type: 'page_size', list: [ 25, 50, 100, 1000, 0 ], attr: { class: 'form-select-sm' } } // 0 - all
]
},
{
type: 'out',
left: [
{ type: 'pages', show: { prev: false, next: false }, count: 5, attr: { class: 'pagination-sm' } }
],
},
{
type: 'out',
left: [
{ type: 'pages', count: 0, attr: { class: 'pagination-sm' } }
],
}
],
}).render('table-pages');
</script>
<div id="table-expand-rows"></div>
<script>
CoreUI.table.create({
id: 'expand',
columns: [
{ type: 'numbers', width: 10, attr: { class: "bg-light border-end text-end" } },
{ field: 'btn_static', label: 'static content', type: 'html', width: 110,
render: function (record, table) {
let btn = $(`<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-chevron-down"></i>
</button>`);
btn.click(function () {
table.expandRecordContent(
record.index,
`Record custom content: <b>${record.data.fname} ${record.data.lname}</b>`,
true
);
});
return btn;
}
},
{ field: 'btn_ajax', label: 'ajax content', type: 'html', width: 110,
render: function (record, table) {
let btn = $(`<button class="btn btn-sm btn-outline-secondary">
<i class="bi bi-chevron-down"></i>
</button>`);
btn.click(function () {
CoreUI.table.get('expand').expandRecordUrl(record.index, 'data/page1.json');
});
return btn;
}
},
{ field: 'fname', label: 'First Name'},
{ field: 'lname', label: 'Last Name'},
{ field: 'sdate', label: 'Start Date', type: 'date' }
],
records: [
{ id: "1", fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '2023-09-03' },
{ id: "2", fname: 'Stuart', lname: 'Motzart', email: 'frank@gmail.com', sdate: '2023-04-03' },
{ id: "3", fname: 'Jin', lname: 'Franson', email: 'peter@gmail.com', sdate: '2023-02-03' }
]
}).render('table-expand-rows');
</script>
<div id="table-events"></div>
<script>
let tableEvents = CoreUI.table.create({
primaryKey: 'id',
columns: [
{ type: 'numbers', width: 10, attr: { class: "border-end text-end" } },
{ type: 'select' },
{ field: 'name', label: 'Name' },
{ field: 'email', label: 'Email', width: 150 },
{ type: 'date', field: 'sdate', label: 'Start Date', width: 100, format: 'DD.MM.YYYY' },
{ type: 'switch', field: 'is_active', label: 'On', valueY: 1, valueN: 0, disabled: false,
onChange: function (record, value) {
alert("Switch record to " + value + ": " + JSON.stringify(record));
}
}
],
onClick: function (record, table, event) {
alert('Click record: ' + JSON.stringify(record))
},
records: [
{ id: "1", name: 'Jane Doe', email: 'jdoe@gmail.com', sdate: '2023-09-03' },
{ id: "2", name: 'Stuart Motzart', email: 'frank@gmail.com', sdate: '2023-04-03' },
{ id: "3", name: 'Jin Franson', email: 'peter@gmail.com', sdate: '2023-02-03' }
]
});
tableEvents.on('record_select', function (record) {
alert('Select record: ' + JSON.stringify(record));
});
tableEvents.on('record_unselect', function (record) {
alert('Unselect record: ' + JSON.stringify(record));
});
tableEvents.on('record_select_all', function () {
alert('Select all records');
});
tableEvents.on('record_unselect_all', function () {
alert('Unselect all records');
});
tableEvents.on('container_show', function () {
console.log('show_container')
});
tableEvents.on('records_show', function () {
console.log('records_show')
});
tableEvents.render('table-events');
</script>
<div id="table-column-types-basic"></div>
<script>
CoreUI.table.create({
columns: [
{ type: 'numbers', width: 25, attr: { class: "border-end text-end" } },
{ type: 'text', field: 'text', label: 'Text', description: "Description text" },
{ type: 'number', field: 'number', label: 'Number', width: 100 },
{ type: 'money', field: 'money', label: 'Money', width: 120, currency: 'USD'},
{ type: 'html', field: 'html', label: 'Html', width: 100 },
{ type: 'date', field: 'date', label: 'Date', format: 'DD.MM.YYYY', width: 100 },
{ type: 'datetime', field: 'datetime', label: 'Datetime', format: 'DD.MM.YYYY hh:mm:ss', width: 140 }
],
records: [
{ text: 'Jane Doe', number: 32, money: 0.15, html: '<span style="color: #f00">Text</span> <b>bold</b>', date: '2023-04-03', datetime: '2023-12-03 12:04:10'},
{ text: 'Stuart Motzart', number: 100, money: 10, html: '<button class="btn btn-xs btn-outline-secondary">button</button>', date: '2023-04-03', datetime: '2023-11-03 13:10:30'},
{ text: 'Jin Franson', number: 1122335, money: 12500.00, html: '<a href="#">Link</a>', date: '2023-04-03', datetime: '2023-04-03 23:57:00'},
{ text: 'Susan Ottie', number: -2343, money: -1234.40, html: '<i class="bi bi-star"></i> icon', date: '2023-09-03', datetime: '2023-10-03 05:15:37'},
]
}).render('table-column-types-basic');
</script>
<div id="table-column-types-standard"></div>
<script>
CoreUI.table.create({
id: 'types_standard',
columns: [
{ type: 'select' },
{ type: 'switch', field: 'is_active', label: 'Switch', valueY: 1, valueN: 0, width: 80 },
{ type: 'image', field: 'image', label: 'Image', width: 100, imgStyle: 'circle', imgWidth: 30, imgHeight: 30, imgBorder: true },
{ type: 'badge', field: 'badge', label: 'Badge'},
{ type: 'dateHuman', field: 'datetime', label: 'Date Human'},
{ type: 'link', field: 'link', label: 'Link', width: 200 },
{ type: 'button', field: 'button', label: 'Button', width: 100 },
],
records: [
{
is_active: 0,
image: 'data/img/thumb1.png',
badge: { type: 'secondary', text: 'Secondary' },
datetime: '2024-12-21 19:04:10',
link: {
content: "Link content",
url: "#/link-url",
attr: {}
},
button: {
content: "Button",
attr: { class: 'btn btn-sm btn-outline-secondary' },
onClick: function (record, table) { console.log(record) }
}
},
{
is_active: 0,
image: 'data/img/thumb2.png',
badge: { type: 'primary', text: 'Primary' },
datetime: '2024-10-24 07:04:10',
link: "#/link-url",
button: {
content: "Button",
attr: { class: 'btn btn-sm btn-outline-secondary' },
onClick: function (record, table) { console.log(record) }
}
},
{
is_active: 1,
image: 'data/img/thumb3.png',
badge: { type: 'success', text: 'Success' },
datetime: '2023-12-03 12:04:10',
link: {
content: "Link",
url: "#/link-url",
attr: { class: 'btn btn-sm btn-outline-secondary' }
},
button: {
content: "Button",
attr: { class: 'btn btn-sm btn-outline-secondary' },
onClick: "console.log(record)"
}
},
{
is_active: 1,
image: 'data/img/thumb4.png',
button: {
content: "Button",
attr: { class: 'btn btn-sm btn-outline-secondary' },
onClick: "console.log(record)"
},
datetime: '2025-04-06 17:04:10',
badge: { type: 'warning', text: 'Warning' },
link: {
content: "<i class=\"bi bi-arrow-right\"></i>",
url: "#/link-url",
attr: { class: 'btn btn-sm btn-outline-secondary' }
}
},
]
}).render('table-column-types-standard');
</script>
<div id="table-column-types-advanced"></div>
<script>
CoreUI.table.create({
id: 'types_advanced',
columns: [
{ type: 'component', field: 'component', label: 'Components coreui' },
{ type: 'progress', field: 'progress', label: 'Progress', width: 250, barWidth: 150, showPercent: true },
{ type: 'menu', field: 'menu', label: 'Menu', width: 100 },
],
records: [
{
component: {
component: 'coreui.chart',
datasets: [
{ type: "bar", name: "dataset", style: { fill: 100 }, data: [12, 14, 2, 47, 42, 15, 47, 75, 65, 19, 14] }
],
options: {
width: 100,
height: 30,
enabled: { legend: false, labels: false, minimize: true },
axis: { xaxis: { show: false }, yaxis: { show: false }, grid: { show: false } }
}
},
progress: 25,
menu: {
content: '<i class="bi bi-three-dots-vertical"></i>',
attr: { class: 'btn btn-sm btn-outline-secondary rounded-1' },
position: 'end',
items: [
{ type: 'header', content: 'Header text' },
{ type: 'link', content: 'Link', url: "#" },
{
type: 'button',
content: 'Button',
onClick: function (record, table, event) { console.log('button') }
},
{ type: 'divider' },
{
type: 'button',
content: '<i class="bi bi-trash"></i> Delete',
attr: { class: 'text-danger' },
onClick: function (record, table, event) { console.log('delete record ' + record.index) }
},
]
}
},
{
component: {
component: 'coreui.chart',
datasets: [
{ type: "line", name: "dataset", style: { fill: 0 }, data: [25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 54] }
],
options: {
width: 100,
height: 30,
enabled: { legend: false, labels: false, minimize: true },
axis: { xaxis: { show: false }, yaxis: { show: false }, grid: { show: false } }
}
},
progress: { percent: 50, color: 'info' },
menu: {
attr: { class: 'btn btn-sm rounded-1' },
items: [
{ type: 'link', content: 'Link 1', url: "#" },
{ type: 'link', content: 'Link 2', url: "#" },
{ type: 'link', content: 'Link 3', url: "#" },
]
}
},
{
component: {
component: 'coreui.chart',
labels: ['d1', 'd2', 'd3', 'd4'],
datasets: [
{ type: "pie", name: "Pie", data: [43, 32, 12, 9] }
],
options: {
type: "pie",
width: 100,
height: 30,
enabled: { legend: false, labels: false, minimize: true },
axis: { xaxis: { show: false }, yaxis: { show: false }, grid: { show: false } }
}
},
progress: { percent: 75, color: 'warning', description: '750Mb of 1Gb' },
menu: {
attr: { class: 'btn btn-sm rounded-1' },
position: 'start',
items: [
{ type: 'link', content: 'Link 1', url: "#" },
{ type: 'link', content: 'Link 2', url: "#" },
{ type: 'link', content: 'Link 3', url: "#" },
]
}
},
{
component: {
component: 'coreui.table',
columns: [
{field: 'fname', label: 'First Name', width: 100},
{field: 'lname', label: 'Last Name'},
{field: 'sdate', label: 'Start Date', width: 120, type: 'date'}
],
records: [
{id: "1", fname: 'Jane', lname: 'Doe', sdate: '2023-09-03'},
{id: "2", fname: 'Stuart', lname: 'Motzart', sdate: '2023-04-03'},
{id: "3", fname: 'Jin', lname: 'Franson', sdate: '2023-02-03'}
]
},
progress: { percent: 100, color: 'success', description: 'Description text' },
menu: {
content: 'Dropdown',
attr: { class: 'btn btn-sm btn-secondary dropdown-toggle' },
position: 'end',
items: [
{ type: 'link', content: 'Link 1', url: "#" },
{ type: 'link', content: 'Link 2', url: "#" },
{ type: 'link', content: 'Link 3', url: "#" },
]
}
},
]
}).render('table-column-types-advanced');
</script>
<div id="table-column-manage"></div>
<script>
CoreUI.table.create({
header: [
{
type: 'in',
left: [
{
type: 'columns',
btn: {
content: "<i class=\"bi bi-layout-three-columns\"></i> Columns",
attr: { class: 'btn btn-sm btn-secondary' }
},
btnComplete: {
content: "Complete",
attr: { class: 'btn btn-sm btn-primary' },
}
}
]
},
],
columns: [
{ type: 'numbers', width: 10, attr: { class: "bg-light border-end text-end" } },
{ field: 'fname', label: 'First Name'},
{ field: 'lname', label: 'Last Name', show: false},
{ field: 'sdate', label: 'Start Date', type: 'date' }
],
records: [
{ id: "1", fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '2023-09-03' },
{ id: "2", fname: 'Stuart', lname: 'Motzart', email: 'frank@gmail.com', sdate: '2023-04-03' },
{ id: "3", fname: 'Jin', lname: 'Franson', email: 'peter@gmail.com', sdate: '2023-02-03' }
]
}).render('table-column-manage');
</script>
<div id="table-columns-fixed"></div>
<script>
CoreUI.table.create({
height: 550,
columns: [
{ type: 'numbers', attr: { class: 'text-end' }, fixed: 'left' },
{ type: 'select', fixed: 'left' },
{ type: 'text', field: 'cell1', label: 'Column 1', attr: { style: 'min-width: 150px' }, fixed: 'left' },
{ type: 'text', field: 'cell2', label: 'Column 2', attr: { style: 'min-width: 150px' }, fixed: 'left' },
{ type: 'text', field: 'cell3', label: 'Column 3', attr: { style: 'min-width: 150px' } },
{ type: 'text', field: 'cell4', label: 'Column 4', attr: { style: 'min-width: 150px' } },
{ type: 'text', field: 'cell5', label: 'Column 5', attr: { style: 'min-width: 150px' } },
{ type: 'text', field: 'cell6', label: 'Column 6', attr: { style: 'min-width: 150px' } },
{ type: 'text', field: 'cell7', label: 'Column 7', attr: { style: 'min-width: 150px' } },
{ type: 'text', field: 'cell8', label: 'Column 8', attr: { style: 'min-width: 150px' } },
{ type: 'text', field: 'cell9', label: 'Column 9', attr: { style: 'min-width: 150px' } },
{ type: 'text', field: 'cell10', label: 'Column 10', attr: { style: 'min-width: 150px' } },
{ type: 'text', field: 'cell11', label: 'Column 11', attr: { style: 'min-width: 150px' } },
{ type: 'text', field: 'cell12', label: 'Column 12', attr: { style: 'min-width: 150px' } },
{ type: 'text', field: 'cell13', label: 'Column 13', attr: { style: 'min-width: 150px' } },
{ type: 'text', field: 'cell14', label: 'Column 14', attr: { style: 'min-width: 150px' } },
{ type: 'text', field: 'cell15', label: 'Column 15', attr: { style: 'min-width: 150px' }, fixed: 'right' },
],
records: [
{ cell1: 'column value', cell2: 'column value', cell3: 'column value', cell4: 'column value', cell5: 'column value', cell6: 'column value', cell7: 'column value', cell8: 'column value', cell9: 'column value', cell10: 'column value', cell11: 'column value', cell12: 'column value', cell13: 'column value', cell14: 'column value', cell15: 'column value' },
{ cell1: 'column value', cell2: 'column value', cell3: 'column value', cell4: 'column value', cell5: 'column value', cell6: 'column value', cell7: 'column value', cell8: 'column value', cell9: 'column value', cell10: 'column value', cell11: 'column value', cell12: 'column value', cell13: 'column value', cell14: 'column value', cell15: 'column value' },
{ cell1: 'column value', cell2: 'column value', cell3: 'column value', cell4: 'column value', cell5: 'column value', cell6: 'column value', cell7: 'column value', cell8: 'column value', cell9: 'column value', cell10: 'column value', cell11: 'column value', cell12: 'column value', cell13: 'column value', cell14: 'column value', cell15: 'column value' },
{ cell1: 'column value', cell2: 'column value', cell3: 'column value', cell4: 'column value', cell5: 'column value', cell6: 'column value', cell7: 'column value', cell8: 'column value', cell9: 'column value', cell10: 'column value', cell11: 'column value', cell12: 'column value', cell13: 'column value', cell14: 'column value', cell15: 'column value' },
{ cell1: 'column value', cell2: 'column value', cell3: 'column value', cell4: 'column value', cell5: 'column value', cell6: 'column value', cell7: 'column value', cell8: 'column value', cell9: 'column value', cell10: 'column value', cell11: 'column value', cell12: 'column value', cell13: 'column value', cell14: 'column value', cell15: 'column value' },
{ cell1: 'column value', cell2: 'column value', cell3: 'column value', cell4: 'column value', cell5: 'column value', cell6: 'column value', cell7: 'column value', cell8: 'column value', cell9: 'column value', cell10: 'column value', cell11: 'column value', cell12: 'column value', cell13: 'column value', cell14: 'column value', cell15: 'column value' },
{ cell1: 'column value', cell2: 'column value', cell3: 'column value', cell4: 'column value', cell5: 'column value', cell6: 'column value', cell7: 'column value', cell8: 'column value', cell9: 'column value', cell10: 'column value', cell11: 'column value', cell12: 'column value', cell13: 'column value', cell14: 'column value', cell15: 'column value' },
{ cell1: 'column value', cell2: 'column value', cell3: 'column value', cell4: 'column value', cell5: 'column value', cell6: 'column value', cell7: 'column value', cell8: 'column value', cell9: 'column value', cell10: 'column value', cell11: 'column value', cell12: 'column value', cell13: 'column value', cell14: 'column value', cell15: 'column value' },
{ cell1: 'column value', cell2: 'column value', cell3: 'column value', cell4: 'column value', cell5: 'column value', cell6: 'column value', cell7: 'column value', cell8: 'column value', cell9: 'column value', cell10: 'column value', cell11: 'column value', cell12: 'column value', cell13: 'column value', cell14: 'column value', cell15: 'column value' },
{ cell1: 'column value', cell2: 'column value', cell3: 'column value', cell4: 'column value', cell5: 'column value', cell6: 'column value', cell7: 'column value', cell8: 'column value', cell9: 'column value', cell10: 'column value', cell11: 'column value', cell12: 'column value', cell13: 'column value', cell14: 'column value', cell15: 'column value' },
{ cell1: 'column value', cell2: 'column value', cell3: 'column value', cell4: 'column value', cell5: 'column value', cell6: 'column value', cell7: 'column value', cell8: 'column value', cell9: 'column value', cell10: 'column value', cell11: 'column value', cell12: 'column value', cell13: 'column value', cell14: 'column value', cell15: 'column value' },
{ cell1: 'column value', cell2: 'column value', cell3: 'column value', cell4: 'column value', cell5: 'column value', cell6: 'column value', cell7: 'column value', cell8: 'column value', cell9: 'column value', cell10: 'column value', cell11: 'column value', cell12: 'column value', cell13: 'column value', cell14: 'column value', cell15: 'column value' },
{ cell1: 'column value', cell2: 'column value', cell3: 'column value', cell4: 'column value', cell5: 'column value', cell6: 'column value', cell7: 'column value', cell8: 'column value', cell9: 'column value', cell10: 'column value', cell11: 'column value', cell12: 'column value', cell13: 'column value', cell14: 'column value', cell15: 'column value' },
{ cell1: 'column value', cell2: 'column value', cell3: 'column value', cell4: 'column value', cell5: 'column value', cell6: 'column value', cell7: 'column value', cell8: 'column value', cell9: 'column value', cell10: 'column value', cell11: 'column value', cell12: 'column value', cell13: 'column value', cell14: 'column value', cell15: 'column value' },
{ cell1: 'column value', cell2: 'column value', cell3: 'column value', cell4: 'column value', cell5: 'column value', cell6: 'column value', cell7: 'column value', cell8: 'column value', cell9: 'column value', cell10: 'column value', cell11: 'column value', cell12: 'column value', cell13: 'column value', cell14: 'column value', cell15: 'column value' },
{ cell1: 'column value', cell2: 'column value', cell3: 'column value', cell4: 'column value', cell5: 'column value', cell6: 'column value', cell7: 'column value', cell8: 'column value', cell9: 'column value', cell10: 'column value', cell11: 'column value', cell12: 'column value', cell13: 'column value', cell14: 'column value', cell15: 'column value' },
{ cell1: 'column value', cell2: 'column value', cell3: 'column value', cell4: 'column value', cell5: 'column value', cell6: 'column value', cell7: 'column value', cell8: 'column value', cell9: 'column value', cell10: 'column value', cell11: 'column value', cell12: 'column value', cell13: 'column value', cell14: 'column value', cell15: 'column value' },
{ cell1: 'column value', cell2: 'column value', cell3: 'column value', cell4: 'column value', cell5: 'column value', cell6: 'column value', cell7: 'column value', cell8: 'column value', cell9: 'column value', cell10: 'column value', cell11: 'column value', cell12: 'column value', cell13: 'column value', cell14: 'column value', cell15: 'column value' },
{ cell1: 'column value', cell2: 'column value', cell3: 'column value', cell4: 'column value', cell5: 'column value', cell6: 'column value', cell7: 'column value', cell8: 'column value', cell9: 'column value', cell10: 'column value', cell11: 'column value', cell12: 'column value', cell13: 'column value', cell14: 'column value', cell15: 'column value' }
]
}).render('table-columns-fixed');
</script>
<div id="table-headers"></div>
<script>
CoreUI.table.create({
class: 'table-bordered',
maxHeight: 400,
columnsHeader: [
[
{ content: '', attr: { rowspan: 2, colspan: 2 } },
{ content: 'General Information', attr: { colspan: 7 } },
],
[
{ content: 'Full name', attr: { colspan: 3 } },
{ content: 'Important Dates', attr: { colspan: 3, class: "text-center" } }
]
],
columns: [
{ type: 'numbers'},
{ type: 'select'},
{ type: 'text', field: 'fname', label: 'First Name', width: '15%'},
{ type: 'text', field: 'lname', label: 'Last Name', width: '15%'},
{ type: 'text', field: 'email', label: 'Email' },
{ type: 'date', field: 'sdate', label: 'Start Date', width: 120, format: 'DD/MM/YYYY', attr: { class: 'text-end' }, attrHeader: { class: 'text-end' }},
{ type: 'date', field: 'edate', label: 'End Date', width: 120, format: 'DD/MM/YYYY', attr: { class: 'text-end' }, attrHeader: { class: 'text-end' }},
{ type: 'switch', field: 'is_active', label: 'On', valueY: 1, valueN: 0,
onChange: function (record, value) {
console.log(record);
console.log(value);
}
},
],
records: [
{ id: 1, fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-12-03', is_active: 0 },
{ id: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-11-03', is_active: 0 },
{ id: 3, fname: 'Jin', lname: 'Franson', email: 'peter@gmail.com', sdate: '2023-04-03', edate: '2023-04-03', is_active: 1 },
{ id: 4, fname: 'Susan', lname: 'Ottie', email: 'frank@gmail.com', sdate: '2023-09-03', edate: '2023-10-03', is_active: 1 },
{ id: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-06-24', is_active: 1 },
{ id: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '2023-02-03', edate: '2023-06-03', is_active: 0 },
{ id: 7, fname: 'Mark', lname: 'Welldo', email: 'susan@gmail.com', sdate: '2023-04-03', edate: '2023-06-23', is_active: 0 },
{ id: 8, fname: 'Thomas', lname: 'Bahh', email: 'david@gmail.com', sdate: '2023-04-03', edate: '2023-09-16', is_active: 0 },
{ id: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'magi@gmail.com', sdate: '2023-04-03', edate: '2023-04-03', is_active: 0 },
{ id: 10, fname: 'Jill', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-04-03', is_active: 0 },
{ id: 11, fname: 'Frank', lname: 'Motzart', email: 'peterson@gmail.com', sdate: '2023-04-03', edate: '2023-04-03', is_active: 0 },
{ id: 12, fname: 'Peter', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-08-03', is_active: 0 },
{ id: 13, fname: 'Andrew', lname: 'Ottie', email: 'magi@gmail.com', sdate: '2023-04-03', edate: '2023-06-19', is_active: 0 },
{ id: 14, fname: 'Manny', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-08-05', is_active: 0 },
{ id: 15, fname: 'Ben', lname: 'Gatos', email: 'peter@gmail.com', sdate: '2023-04-03', edate: '2023-09-03', is_active: 0 },
{ id: 16, fname: 'Doer', lname: 'Welldo', email: 'magi@gmail.com', sdate: '2023-04-03', edate: '2023-04-07', is_active: 0 },
{ id: 17, fname: 'Shashi', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-04-03', is_active: 0 },
{ id: 18, fname: 'Av', lname: 'Rachmaninov', email: 'joe@gmail.com', sdate: '2023-09-03', edate: '2023-12-06', is_active: 0 },
]
}).render('table-headers');
</script>
<div id="table-columns-row-span"></div>
<script>
CoreUI.table.create({
class: 'table-bordered',
showHeaders: false,
columns: [
{ type: 'text', field: 'group', label: 'Group', width: 300 },
{ type: 'text', field: 'count', label: 'Count' },
{ type: 'money', field: 'money', label: 'Money', width: 200, currency: 'USD'},
{ type: 'date', field: 'date', label: 'Date', width: 200, format: 'DD.MM.YYYY' },
],
records: [
{
group: 'Group 1',
count: 'Jane Doe',
_meta: {
fields: {
group: { attr: { rowspan: 2 } },
count: { attr: { colspan: 3 } },
money: { show: false },
date: { show: false },
},
}
},
{
count: 32,
money: 0.15,
date: '2023-04-03',
_meta: {
fields: {
group: { show: false }
},
}
},
{
group: 'Group 2',
count: 'Jin Franson',
_meta: {
fields: {
group: { attr: { rowspan: 2 } },
count: { attr: { colspan: 3 } },
money: { show: false },
date: { show: false },
},
}
},
{
count: 32,
money: 0.15,
date: '2023-04-03',
_meta: {
fields: {
group: { show: false }
},
}
}
]
}).render('table-columns-row-span');
</script>
<div id="table-group"></div>
<script>
CoreUI.table.create({
group: {
field: 'fname',
attr: { class: 'table-secondary' },
render: function (record) {
return 'Group: ' + record.data.fname + ' ' + record.data.lname
},
},
columns: [
{ type: 'numbers', width: 10, attr: { class: "bg-light border-end text-end" } },
{ field: 'fname', label: 'First Name'},
{ field: 'lname', label: 'Last Name'},
{ field: 'sdate', label: 'Start Date', type: 'date' }
],
records: [
{ id: "1", fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '2023-09-03' },
{ id: "2", fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '2023-09-03' },
{ id: "3", fname: 'Stuart', lname: 'Motzart', email: 'frank@gmail.com', sdate: '2023-04-03' },
{ id: "4", fname: 'Jin', lname: 'Franson', email: 'peter@gmail.com', sdate: '2023-02-03' },
{ id: "5", fname: 'Jin', lname: 'Franson', email: 'peter@gmail.com', sdate: '2023-02-03' },
{ id: "6", fname: 'Jin', lname: 'Franson', email: 'peter@gmail.com', sdate: '2023-02-03' }
]
}).render('table-group');
</script>
<div id="table-sizing-decoration"></div>
<script>
CoreUI.table.create({
class: 'table-bordered table-sm table-hover table-striped',
width: '100%',
minWidth: '100%',
maxWidth: '100%',
height: 540,
minHeight: 540,
maxHeight: 540,
columns: [
{ type: 'numbers'},
{ type: 'select'},
{ type: 'text', field: 'fname', label: 'First Name', width: '15%'},
{ type: 'text', field: 'lname', label: 'Last Name', width: '15%'},
{ type: 'text', field: 'email', label: 'Email' },
{ type: 'date', field: 'sdate', label: 'Start Date', width: 120, format: 'DD/MM/YYYY', attr: { class: 'text-end' }, attrHeader: { class: 'text-end' }},
{ type: 'date', field: 'edate', label: 'End Date', width: 120, format: 'DD/MM/YYYY', attr: { class: 'text-end' }, attrHeader: { class: 'text-end' }},
{ type: 'switch', field: 'is_active', label: 'On', valueY: 1, valueN: 0 },
],
records: [
{ id: 1, fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-12-03', is_active: 0 },
{ id: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-11-03', is_active: 0 },
{ id: 3, fname: 'Jin', lname: 'Franson', email: 'peter@gmail.com', sdate: '2023-04-03', edate: '2023-04-03', is_active: 1 },
{ id: 4, fname: 'Susan', lname: 'Ottie', email: 'frank@gmail.com', sdate: '2023-09-03', edate: '2023-10-03', is_active: 1 },
{ id: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-06-24', is_active: 1 },
{ id: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '2023-02-03', edate: '2023-06-03', is_active: 0 },
{ id: 7, fname: 'Mark', lname: 'Welldo', email: 'susan@gmail.com', sdate: '2023-04-03', edate: '2023-06-23', is_active: 0 },
{ id: 8, fname: 'Thomas', lname: 'Bahh', email: 'david@gmail.com', sdate: '2023-04-03', edate: '2023-09-16', is_active: 0 },
{ id: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'magi@gmail.com', sdate: '2023-04-03', edate: '2023-04-03', is_active: 0 },
{ id: 10, fname: 'Jill', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-04-03', is_active: 0 },
{ id: 11, fname: 'Frank', lname: 'Motzart', email: 'peterson@gmail.com', sdate: '2023-04-03', edate: '2023-04-03', is_active: 0 },
{ id: 12, fname: 'Peter', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-08-03', is_active: 0 },
{ id: 13, fname: 'Andrew', lname: 'Ottie', email: 'magi@gmail.com', sdate: '2023-04-03', edate: '2023-06-19', is_active: 0 },
{ id: 14, fname: 'Manny', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-08-05', is_active: 0 },
{ id: 15, fname: 'Ben', lname: 'Gatos', email: 'peter@gmail.com', sdate: '2023-04-03', edate: '2023-09-03', is_active: 0 },
{ id: 16, fname: 'Doer', lname: 'Welldo', email: 'magi@gmail.com', sdate: '2023-04-03', edate: '2023-04-07', is_active: 0 },
{ id: 17, fname: 'Shashi', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-04-03', is_active: 0 },
{ id: 18, fname: 'Av', lname: 'Rachmaninov', email: 'joe@gmail.com', sdate: '2023-09-03', edate: '2023-12-06', is_active: 0 },
{ id: 19, fname: 'John', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '2023-09-03', edate: '2023-12-06', is_active: 0 }
]
}).render('table-sizing-decoration');
</script>
<div id="table-themes-compact"></div>
<div id="table-themes-no-border"></div>
<script>
let optionsTheme = {
class: 'table-sm table-hover',
width: '100%',
minWidth: '100%',
maxWidth: '100%',
height: 250,
minHeight: 250,
maxHeight: 250,
columns: [
{ type: 'numbers'},
{ type: 'select'},
{ type: 'text', field: 'fname', label: 'First Name', width: '15%'},
{ type: 'text', field: 'lname', label: 'Last Name', width: '15%'},
{ type: 'text', field: 'email', label: 'Email' },
{ type: 'date', field: 'sdate', label: 'Start Date', width: 120, format: 'DD/MM/YYYY', attr: { class: 'text-end' }, attrHeader: { class: 'text-end' }},
{ type: 'date', field: 'edate', label: 'End Date', width: 120, format: 'DD/MM/YYYY', attr: { class: 'text-end' }, attrHeader: { class: 'text-end' }},
{ type: 'switch', field: 'is_active', label: 'On', valueY: 1, valueN: 0 },
],
records: [
{ id: 1, fname: 'Jane', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-12-03', is_active: 0 },
{ id: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-11-03', is_active: 0 },
{ id: 3, fname: 'Jin', lname: 'Franson', email: 'peter@gmail.com', sdate: '2023-04-03', edate: '2023-04-03', is_active: 1 },
{ id: 4, fname: 'Susan', lname: 'Ottie', email: 'frank@gmail.com', sdate: '2023-09-03', edate: '2023-10-03', is_active: 1 },
{ id: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-06-24', is_active: 1 },
{ id: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '2023-02-03', edate: '2023-06-03', is_active: 0 },
{ id: 7, fname: 'Mark', lname: 'Welldo', email: 'susan@gmail.com', sdate: '2023-04-03', edate: '2023-06-23', is_active: 0 },
{ id: 8, fname: 'Thomas', lname: 'Bahh', email: 'david@gmail.com', sdate: '2023-04-03', edate: '2023-09-16', is_active: 0 },
{ id: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'magi@gmail.com', sdate: '2023-04-03', edate: '2023-04-03', is_active: 0 },
{ id: 10, fname: 'Jill', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-04-03', is_active: 0 },
{ id: 11, fname: 'Frank', lname: 'Motzart', email: 'peterson@gmail.com', sdate: '2023-04-03', edate: '2023-04-03', is_active: 0 },
{ id: 12, fname: 'Peter', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-08-03', is_active: 0 },
{ id: 13, fname: 'Andrew', lname: 'Ottie', email: 'magi@gmail.com', sdate: '2023-04-03', edate: '2023-06-19', is_active: 0 },
{ id: 14, fname: 'Manny', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-08-05', is_active: 0 },
{ id: 15, fname: 'Ben', lname: 'Gatos', email: 'peter@gmail.com', sdate: '2023-04-03', edate: '2023-09-03', is_active: 0 },
{ id: 16, fname: 'Doer', lname: 'Welldo', email: 'magi@gmail.com', sdate: '2023-04-03', edate: '2023-04-07', is_active: 0 },
{ id: 17, fname: 'Shashi', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '2023-04-03', edate: '2023-04-03', is_active: 0 },
{ id: 18, fname: 'Av', lname: 'Rachmaninov', email: 'joe@gmail.com', sdate: '2023-09-03', edate: '2023-12-06', is_active: 0 },
{ id: 19, fname: 'John', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '2023-09-03', edate: '2023-12-06', is_active: 0 }
]
};
optionsTheme.theme = 'compact';
CoreUI.table.create(optionsTheme).render('table-themes-compact');
optionsTheme.theme = 'no-border';
CoreUI.table.create(optionsTheme).render('table-themes-no-border');
</script>
<div id="table-sorting"></div>
<script>
CoreUI.table.create({
saveState: true,
sort: [ { field: 'fname', order: 'asc' } ],
maxHeight: 400,
columns: [
{ type: 'numbers', width: 10, attr: { class: "bg-light border-end text-end" } },
{ field: 'fname', label: 'First Name', sortable: true, width: '25%' },
{ field: 'lname', label: 'Last Name', sortable: true, width: '25%' },
{ field: 'sdate', label: 'Start Date', sortable: true }
],
records: [
{ id: 1, fname: "Joseph", lname: "Haydn", sdate: "1732-1809" },
{ id: 2, fname: "Ludwig Van", lname: "Beethoven", sdate: "1770-1827" },
{ id: 3, fname: "Wolfgang1 Amadeus", lname: "Mozart", sdate: "1756-1791" },
{ id: 4, fname: "Johann Sebastian", lname: "Bach", sdate: "1685-1750" },
{ id: 5, fname: "Richard", lname: "Wagner", sdate: "1685-1750" },
{ id: 6, fname: "Joseph", lname: "Haydn", sdate: "1732-1809" },
{ id: 7, fname: "Ludwig Van", lname: "Beethoven", sdate: "1770-1827", _meta: { "attr": { "style": "background-color: #C2F5B4" }}},
{ id: 8, fname: "Wolfgang2 Amadeus", lname: "Mozart", sdate: "1756-1791" },
{ id: 9, fname: "Johann Sebastian", lname: "Bach", sdate: "1685-1750" },
{ id: 10, fname: "Richard", lname: "Wagner", sdate: "1685-1750", _meta: { "attr": { "style": "color: red" }}},
{ id: 11, fname: "Joseph", lname: "Haydn", sdate: "1732-1809", _meta: { "attr": { "style": "background-color: #FBFEC0" }}},
{ id: 12, fname: "Ludwig Van", lname: "Beethoven", sdate: "1770-1827" },
{ id: 13, fname: "Wolfgang3 Amadeus", lname: "Mozart", sdate: "1756-1791" },
{ id: 14, fname: "Johann Sebastian", lname: "Bach", sdate: "1685-1750" },
{ id: 15, fname: "Richard", lname: "Wagner", sdate: "1685-1750", _meta: { "attr": { "style": "color: blue" }}}
]
}).render('table-sorting')
</script>
<div id="table-search"></div>
<script>
CoreUI.table.create({
header: [
{
type: 'in',
left: [
{
type: "search",
btn: {
content: "<i class=\"bi bi-search\"></i> Search",
attr: { class: 'btn btn-sm btn-secondary' }
},
btnClear: {
content: "<i class=\"bi bi-x\"></i>",
attr: { class: 'btn btn-sm btn-outline-secondary' }
},
btnComplete: {
content: "Search",
attr: { class: 'btn btn-sm btn-primary' }
},
},
]
}
],
footer: [
{
type: 'out',
left: [ { type: 'total' } ]
}
],
search: {
labelWidth: 200,
controls: [
{ type: 'text', field: 'name', label: 'text', width: 200, attr: { placeholder: 'text' },
description: "Description text", prefix: "Prefix content"
},
{ type: 'number', field: 'number', label: 'number', width: 200, attr: { placeholder: 'number' } },
{ type: 'date', field: 'sdate', label: 'date', width: 200, attr: {} },
{ type: 'date_month', field: 'sdate', label: 'date_month', width: 200, attr: {} },
{ type: 'datetime', field: 'sdate', label: 'datetime', width: 200, attr: {} },
{ type: 'date_range', field: 'sdate', label: 'date_range', width: 200, attr: {} },
{ type: 'datetime_range', field: 'sdate', label: 'datetime_range', width: 200, attr: {} },
{ type: 'radio', field: 'active', label: 'radio',
options: [
{ value: 'Y', text: 'Active' },
{ value: 'N', text: 'Inactive' },
]
},
{ type: 'checkbox', field: 'id', label: 'checkbox',
options: [
{ value: '1', text: 'Dionne Mccray' },
{ value: '2', text: 'Bridgett Melendez' },
{ value: '3', text: 'Finley Meyer' },
]
},
{ type: 'checkboxBtn', field: 'id', label: 'checkbox btn',
options: [
{ value: '1', text: 'Dionne Mccray' },
{ value: '2', text: 'Bridgett Melendez' },
{ value: '3', text: 'Finley Meyer' },
]
},
{ type: 'switch', field: 'active', label: 'switch', valueY: 1 },
{ type: 'select', field: 'id', label: 'select', width: 200,
options: {
'1': 'Dionne Mccray',
'2': 'Bridgett Melendez',
'3': 'Finley Meyer',
'4': 'Sheila Briggs',
'5': 'Vasquez Shepard',
}
},
{ type: 'select', field: 'id', label: 'multiselect', width: 200, attr: {multiple: "multiple"},
options: [
{ value: '0', text: 'Armstrong Cole' },
{ type: "group", label: 'Group 1',
options : [
{ value: 1, text: 'Dionne Mccray' },
{ value: 2, text: 'Bridgett Melendez' },
]
},
{ type: "group", label: 'Group 2', attr: { class: "group-class" },
options : [
{ value: 3, text: 'Finley Meyer' },
{ value: 4, text: 'Sheila Briggs' },
{ value: 5, text: 'Vasquez Shepard' }
]
}
]
}
]
},
columns: [
{ type: 'numbers', width: 10, attr: { class: "bg-light border-end text-end" } },
{ field: 'name', label: 'Name' },
{ field: 'number', label: 'Number', type: 'number', width: 80 },
{ field: 'active', label: 'Active', type: 'switch', width: 80 },
{ field: 'sdate', label: 'Start Date', type: 'date', width: 140 }
],
records: [
{ "id": "0", "name": "Armstrong Cole", "number": 28, "active": 0, "sdate": "2018-09-18" },
{ "id": "1", "name": "Dionne Mccray", "number": 38, "active": 0, "sdate": "2015-03-06" },
{ "id": "2", "name": "Bridgett Melendez", "number": 33, "active": 0, "sdate": "2020-02-13" },
{ "id": "3", "name": "Finley Meyer", "number": 35, "active": 1, "sdate": "2014-11-17" },
{ "id": "4", "name": "Sheila Briggs", "number": 38, "active": 0, "sdate": "2023-07-04" },
{ "id": "5", "name": "Vasquez Shepard", "number": 23, "active": 1, "sdate": "2015-10-30" },
{ "id": "6", "name": "Meredith Garrison", "number": 27, "active": 0, "sdate": "2021-04-07" },
{ "id": "7", "name": "Isabella Poole", "number": 39, "active": 1, "sdate": "2023-02-24" },
{ "id": "8", "name": "Roach Fischer", "number": 30, "active": 0, "sdate": "2021-03-12" },
{ "id": "9", "name": "Melva Macdonald", "number": 38, "active": 1, "sdate": "2015-05-18" },
{ "id": "10", "name": "Goodwin Foster", "number": 21, "active": 0, "sdate": "2018-11-18" },
{ "id": "11", "name": "Jacqueline Gibson", "number": 30, "active": 0, "sdate": "2017-09-30" },
{ "id": "12", "name": "Amalia Shannon", "number": 23, "active": 1, "sdate": "2023-05-24" },
{ "id": "13", "name": "Dena Floyd", "number": 37, "active": 0, "sdate": "2024-01-15" },
{ "id": "14", "name": "Merrill Russo", "number": 22, "active": 1, "sdate": "2023-04-09" }
]
}).render('table-search');
</script>
<div id="table-filters"></div>
<script>
CoreUI.table.create({
id: 'filters',
saveState: true,
header: [
{
type: 'out',
left: [
{ type: 'filter:text', field: 'name', label: 'text', width: 150,
attr: { class: "form-control" },
btn: { attr: { class: "btn btn-sm btn-outline-secondary border-secondary-subtle" } }
},
{ type: 'filter:number', field: 'number', label: '', width: 90,
attr: { class: "form-control" },
btn: { attr: { class: "btn btn-sm btn-outline-secondary border-secondary-subtle" } }
},
{ type: 'filter:date', field: 'sdate', label: '', width: 140, attr: {} },
{ type: 'filter:datetime', field: 'sdate', label: '', width: 180, attr: {} },
{ type: 'filter:date_month', field: 'sdate', label: '', width: 200, attr: {} },
{ type: 'filter:date_range', field: 'sdate', label: '', width: 140, attr: {} },
{ type: 'filter:datetime_range', field: 'sdate', label: '', width: 180, attr: {} },
],
},
{
type: 'in',
left: [
{ type: 'filter:radio', field: 'id', label: '',
options: [
{ value: '1', text: 'Radio 1', class: 'btn btn-outline-secondary' },
{ value: '2', text: 'Radio 2', class: 'btn btn-outline-secondary' },
{ value: '3', text: 'Radio 3', class: 'btn btn-outline-warning' },
] },
{ type: 'filter:checkbox', field: 'id', label: '',
options: [
{ value: '1', text: 'Check 1', class: 'btn btn-outline-secondary' },
{ value: '2', text: 'Check 2', class: 'btn btn-outline-secondary' },
{ value: '3', text: 'Check 3', class: 'btn btn-outline-primary' },
] },
{ type: 'filter:select', field: 'id', label: '', width: 200, attr: {},
options: {
'1': "Dionne Mccray",
'2': "Bridgett Melendez",
'3': "Finley Meyer",
'4': "Sheila Briggs",
'5': "Vasquez Shepard",
}
},
{ type: 'filter:switch', field: 'active', label: 'Active', valueY: 1},
{ type: 'filter_clear', content: '<i class="bi bi-backspace"></i> Clear', attr: { class: "btn btn-secondary" } },
]
}
],
footer: [
{
type: 'out',
left: [ { type: 'total' } ]
}
],
columns: [
{ type: 'numbers', width: 10, attr: { class: "bg-light border-end text-end" } },
{ field: 'name', label: 'Name' },
{ field: 'number', label: 'Number', type: 'number', width: 80 },
{ field: 'active', label: 'Active', type: 'switch', width: 80 },
{ field: 'sdate', label: 'Start Date', type: 'date', width: 140 }
],
records: [
{ "id": '0', "name": "Armstrong Cole", "number": 28, "active": 0, "sdate": "2018-09-18" },
{ "id": '1', "name": "Dionne Mccray", "number": 38, "active": 0, "sdate": "2015-03-06" },
{ "id": '2', "name": "Bridgett Melendez", "number": 33, "active": 0, "sdate": "2020-02-13" },
{ "id": '3', "name": "Finley Meyer", "number": 35, "active": 1, "sdate": "2014-11-17" },
{ "id": '4', "name": "Sheila Briggs", "number": 38, "active": 0, "sdate": "2023-07-04" },
{ "id": '5', "name": "Vasquez Shepard", "number": 23, "active": 1, "sdate": "2015-10-30" },
{ "id": '6', "name": "Meredith Garrison", "number": 27, "active": 0, "sdate": "2021-04-07" },
{ "id": '7', "name": "Isabella Poole", "number": 39, "active": 1, "sdate": "2023-02-24" },
{ "id": '8', "name": "Roach Fischer", "number": 30, "active": 0, "sdate": "2021-03-12" },
{ "id": '9', "name": "Melva Macdonald", "number": 38, "active": 1, "sdate": "2015-05-18" },
{ "id": '10', "name": "Goodwin Foster", "number": 21, "active": 0, "sdate": "2018-11-18" },
{ "id": '11', "name": "Jacqueline Gibson", "number": 30, "active": 0, "sdate": "2017-09-30" },
{ "id": '12', "name": "Amalia Shannon", "number": 23, "active": 1, "sdate": "2023-05-24" },
{ "id": '13', "name": "Dena Floyd", "number": 37, "active": 0, "sdate": "2024-01-15" },
{ "id": '14', "name": "Merrill Russo", "number": 22, "active": 1, "sdate": "2023-04-09" }
]
}).render('table-filters');
</script>
| Name | type | default | description |
|---|---|---|---|
| id | string | crc32b |
Идентификатор таблицы. Этот id будет указан вместо уникального значения |
| class | string | Значение для атрибута сlass для таблицы | |
| theme | string | Название темы | |
| columns | array | Массив с настройками колонок таблицы | |
| primaryKey | string | id |
Имя поля которое является первичным ключом в строках |
| lang | string | ru |
Двухбуквенное обозначение языка |
| width | string|numeric | Ширина таблицы | |
| minWidth | string|numeric | Минимальная ширина таблицы | |
| maxWidth | string|numeric | Максимальная ширина таблицы | |
| height | string|numeric | Высота таблицы таблицы | |
| minHeight | string|numeric | Минимальная высота таблицы | |
| maxHeight | string|numeric | Максимальная высота таблицы | |
| overflow | boolean | false |
Активирует ограничение на выход таблицы за границы контейнера. Включается автоматически при указании ограничения высоты или ширины |
| theadTop | numeric | 0 |
Если overflow не активен, то, по умолчанию, при прокрутке, заголовок таблицы прижимается к верху страницы. Этот параметр указывает высоту на которой заголовок будет оставаться |
| noWrap | boolean | false |
На все текстовые колонки таблицы будет применено ограничение текста в рамках одной строки. Для ограничения колонки по ширине в них требуется указывать maxWidth |
| noWrapToggle | boolean | false |
Если активен, то на все текстовые колонки таблицы с ограничением по строкам (noWrap), будут добавлена кнопка разворачивания и сворачивания содержимого |
| showHeaders | boolean | true |
Указывает, показывать ли заголовки колонок |
| showScrollShadow | boolean | false |
Указывает отображать ли тень при прокрутке |
| onClick | function|string | Событие выполняемое при клике на строку | |
| onClickUrl | string | Адрес открываемый при клике на строку | |
| page | int | 1 |
Текущая страница |
| recordsPerPage | int | 25 |
Количество строк на странице |
| recordsRequest | object|function |
{
method: 'GET',
url: ''
}
|
Параметр указывает, что данные должны быть загружены по адресу. url - адрес для загрузки данных. method - http метод выполняемый для загрузки данных. Если задана функция, то считается, что данные будет получены через нее. Входящие параметры params, table |
| requestParams | object |
{
page: 'page',
count: 'count',
start: 'start',
end: 'end',
sort: 'sort',
search: 'search'
}
|
Имена параметров отвечающих за запрашиваемые данные. |
| saveState | boolean | false |
Указывает сохранять ли измененные состояния таблицы. Если активно, то при формировании таблицы сохраненные состояния будут в приоритете. Сохраняются например сортировка, поиск, фильтрация |
| header | array | Массив настроек для отображения контролов в верхней части таблицы | |
| footer | array | Массив настроек для отображения контролов в нижней части таблицы | |
| columnsHeader | array | Массив настроек для отображения дополнительных заголовков над колонками таблицы | |
| columnsFooter | array | Массив настроек для отображения дополнительных заголовков под колонками таблицы | |
| group | object |
{
field: null,
attr: {},
render: null
}
|
Группировка строк по указанному полю |
| records | array | Массив строк отображаемых в таблице | |
| sort | array | Массив с описанием какие колонки отсортированы и как именно. Пример: { field: 'fname', order: 'asc' } |
|
| search | object |
{
labelWidth: 200,
controls: []
}
|
Указывает, какие поисковые контролы необходимо добавить в раскрывающийся поиск. labelWidth - ширина первой колонки с поисковыми названиями. controls - список поисковых контролов. |
| Method | Description |
|---|---|
| let table = CoreUI.table.create( options ) | Метод для создания экземпляра таблицы |
| let table = CoreUI.table.get( tableId ) | Получение ранее созданного экземпляра таблицы |
| table.render( elementId ) | Формирование html таблицы и размещение его если указан dom элемент. Если элемент не указан, то метод возвращает сформированный html |
| table.initEvents() | Инициализирует события необходимые для корректной работы таблицы. Требует обязательного вызова, если при рендере таблицы не был указан элемент для вставки |
| table.getId() | Получение id таблицы |
| table.getOptions() | Получение заданных ранее опций таблицы |
| table.lock() | Блокирует работу с таблицей и показывает сообщение о загрузке |
| table.unlock() | Разблокирует работу с таблицей |
| table.reload() | Перезагрузка строк в таблице, при условии, что ранее был указан адрес для загрузки |
| table.load( url, method ) | Загрузка строк в таблице по указанному адресу и методу |
| table.reload() | Перезагрузка записей в таблице |
| table.refresh() | Пересоздание тела таблицы |
| table.setPageSize() | Установка общего количества записей на странице |
| table.prevPage() | Загрузка строк в таблице из предыдущей страницы |
| table.nextPage() | Загрузка строк в таблице из следующей страницы |
| table.goPage( page ) | Загрузка строк в таблицу из указанной страницы |
| table.getRecords() | Получение массива всех строк из таблицы |
| table.getRecordsData() | Получение массива c данными всех строк из таблицы |
| table.getRecordById( primaryKey ) | Получение объекта строки из таблицы по указанному primaryKey |
| table.getRecordByIndex() | Получение записи по индексу |
| table.getRecordByField( field, value ) | Получение записи по полю и его значению |
| table.getSelected() | Получение всех выбранных строк из таблицы в виде массива primaryKey |
| table.getSelectedRecords() | Получение всех выбранных строк из таблицы в виде массива объектов строк |
| table.getSelectedRecordsId() | Получение выбранных id |
| table.selectRecord( primaryKey ) | Выделение указанной строки находящийся в таблице |
| table.selectRecordByIndex( index ) | Выделение указанной строки находящийся в таблице по индексу |
| table.unselectRecord( primaryKey ) | Снятие выделения указанной строки находящийся в таблице |
| table.selectAll() | Выделение всех строк в таблице |
| table.unselectAll() | Снятие выделения всех строк в таблице |
| table.on( name, function, context, singleExec ) | Регистрация функции вызываемой при наступлении указанного события |
| table.getLang() | Получение переводов текущего языка |
| table.setColumnsShow( columns ) | Установка видимых колонок, не указанные колонки будут скрыты |
| table.showColumns( columns ) | Показ колонок |
| table.hideColumns( columns ) | Скрытие колонок |
| table.getSearchData() | Получение поисковых данных |
| table.getFilterData() | Получение данных из фильтров |
| table.searchRecords() | Поиск по таблице с использованием данных из поиска и фильтров |
| table.searchRecords() | Поиск по таблице с использованием данных из поиска и фильтров |
| table.clearSearch() | Очистка поисковых данных |
| table.clearFilters() | Очистка поисковых данных в фильтрах |
| table.getControlById() | Получение контрола по его id |
| table.getSearchControlById() | Получение контрола поиска по его id |
| table.sortFields( sorting ) | Сортировка по полям |
| table.sortDefault() | Сортировка по умолчанию |
| table.removeRecordByIndex( index ) | Удаление строки из таблицы по индексу |
| table.addRecordAfterIndex( recordData, index ) | Добавление строки в таблицу после строки с индексом |
| table.addRecordBeforeIndex( recordData, index ) | Добавление строки в таблицу перед строкой с индексом |
| table.addRecordFirst( recordData ) | Добавление строки в начало таблицы |
| table.addRecordLast( recordData ) | Добавление строки в конец таблицы |
| table.setRecords( records, total ) | Установка записей для таблицы |
| table.getRecordsCount() | Получение количества строк |
| table.expandRecordContent( recordIndex, content, isRebuild ) | Раскрытие / скрытие дополнительных данных строки |
| table.expandRecordUrl( recordIndex, url, isRebuild ) | Раскрытие / скрытие дополнительных данных строки |
| Event Type | Description |
|---|---|
| container_show | Показ контейнера таблицы на странице. Происходит один раз при отображении |
| table_show | Показ таблицы на странице. |
| records_show |
Показ строк в таблице.
Происходит каждый раз при загрузке строк в таблицу. В качестве параметров передаются table.on('records_show', function (table)
|
| records_load_start |
Выполняется каждый раз перед началом запроса для загрузки строк в таблицу. В качестве параметров передаются table.on('records_load_start', function (table, xhr)
|
| records_load_end |
Выполняется каждый раз после запроса для загрузки строк в таблицу. В качестве параметров передаются table.on('records_load_end', function (table, xhr, textStatus)
|
| records_load_error |
Выполняется каждый раз после не успешного запроса для загрузки строк в таблицу. В качестве параметров передаются table.on('records_load_error', function (table, xhr, textStatus)
|
| record_select_all | Происходит при выборе всех строк в таблице. |
| record_unselect_all | Происходит при снятии выбора всех строк в таблице. |
| record_select |
Происходит при выборе одной строки в таблице. В качестве параметров передаются table.on('record_select', function (record)
|
| record_unselect |
Происходит при выборе одной строки в таблице. В качестве параметров передаются table.on('record_unselect', function (record)
|
| record_expand_show |
Происходит при разворачивании какого-либо содержимого под строкой в таблице. В качестве параметров передаются table.on('record_expand_show', function (record)
|
| record_expand_hide |
Происходит при сворачивании какого-либо содержимого под строкой в таблице. В качестве параметров передаются table.on('record_expand_hide', function (record)
|
| page_size_update | Происходит при изменении отображаемого количества строк в таблице. |
| columns_change | Происходит при изменении показываемых колонок в таблице. |
| search_change |
Происходит при изменении поисковых параметров в таблице. В качестве параметров передаются table.on('search_change', function (searchData)
|
| filters_change |
Происходит при изменении поисковых фильтров в таблице.
В качестве параметров передаются table.on('filters_change', function (filterData)
|
| records_sort |
Происходит при сортировке в таблице.
В качестве параметров передаются table.on('records_sort', function (table)
|
$coreui-table-thead-bg: var(--bs-body-bg);
$coreui-table-tbody-bg: var(--bs-body-bg);
$coreui-table-tfoot-bg: var(--bs-body-bg);
$coreui-table-tbody-color: #212529;
$coreui-table-tfoot-color: #212529;
$coreui-table-border-color: #c4c8cb;
$coreui-table-border-radius: 0.25rem;
$coreui-table-font-weight: 600;
$coreui-table-font-size: 14px;
$coreui-table-font-size-header: $coreui-table-font-size;
$coreui-table-font-size-footer: 12px;
$coreui-table-control-padding-x: 5px;
$coreui-table-control-padding-y: 2px;
$coreui-table-control-padding-header-x: $coreui-table-control-padding-x;
$coreui-table-control-padding-header-y: $coreui-table-control-padding-y;
$coreui-table-control-padding-footer-x: $coreui-table-control-padding-x;
$coreui-table-control-padding-footer-y: $coreui-table-control-padding-y;