I implemented the built-in row selection and header filters in my tabulator implementation.
However, let's say I have 10 total records and I do a filter to display only the 3 related rows, all rows are still selected when I do a select all even if they are not filtered nor visible.
My expectation is that it should have selected only those filtered or visible rows only.
Below is my code snippet.
var table = new Tabulator("#job_openings_table_wrapper", {
data: tableData,
persistence: true,
height: "420px",
pagination: "local",
paginationSize: 10,
paginationSizeSelector: [10, 20, 50, 100],
footerElement:
"<div id='record-count-container' class='table-footer-element'><label>Total Records:</label><span id='record-count' class='ml-1'>#</span></div><div id='selected-record-count-container' class='table-footer-element'><label>Selected:</label><span id='selected-record-count' class='ml-1'>#</span></div>",
dataFiltered: update_record_count,
dataLoaded: update_record_count,
rowSelectionChanged: update_selected_record_count,
rowContextMenu: rowContextMenuBuilder,
columns: [
{
formatter: "rowSelection",
titleFormatter: "rowSelection",
align: "center",
headerSort: false,
cssClass: "",
},
{
title: "Job ID",
field: "job_id",
width: 150,
formatter: "link",
formatterParams: { url: "#", target: null },
cellClick: jobIdCellOnClick,
headerFilter: "input",
},
{
title: "Position",
field: "position",
width: 250,
editor: "select",
headerFilter: true,
headerFilterParams: {
values: {
"Enterprise Architect": "Enterprise Architect",
"NodeJS Senior Developer": "NodeJS Senior Developer",
"Junior Business Analyst": "Junior Business Analyst",
"Accountant": "Accountant",
"Senior Accountant": "Senior Accountant",
"Finance Officer": "Finance Officer",
"Quality Assurance Analyst": "Quality Assurance Analyst",
"HR Staff": "HR Staff",
"HR Staff": "HR Staff",
"HR Manager": "HR Manager",
"Chief Technology Officer": "Chief Technology Officer",
},
},
},
{
title: "Employment Type",
field: "employment_type",
width: 160,
editor: "select",
headerFilter: true,
headerFilterParams: {
values: {
Contractual: "Contractual",
"Project-based": "Project-based",
Regular: "Regular",
},
},
},
{
title: "Hiring Department",
field: "hiring_department",
width: 250,
editor: "select",
headerFilter: true,
headerFilterParams: {
values: {
"Information Technology Group":
"Information Technology Group",
"Human Resources": "Human Resources",
Finance: "Finance",
Accounting: "Accounting",
},
},
},
{
title: "Status",
field: "status",
width: 140,
editor: "select",
headerFilter: true,
headerFilterParams: {
values: {
Draft: "Draft",
Posted: "Posted",
"On-Hold": "On-Hold",
Cancelled: "Cancelled",
Closed: "Closed",
},
},
},
{
title: "Created On",
field: "created_on",
width: 180,
headerFilter: "input",
},
],
});