JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/[email protected]/source/modules/smart.table.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/source/styles/smart.default.css">
<button>Remove Selection</button>
<smart-table id="table"></smart-table>
JavaScript
/*
1. Build Table
2. Remove selected rows
*/
// 1. Build Table
const fields = [
'id: string',
'active: boolean'
]
const source = [...Array(100).keys()].map(id => {
return {
id,
active: true
}
})
const get_columns = () =>
fields.map(field => {
const f = field.split(':')
return {
label: f[0],
dataField: f[0],
dataType: f[1].trim()
}
})
Smart('#table', class {
get properties() {
return {
keyboardNavigation: true,
filtering: true,
sortMode: 'one',
selection: true,
paging: true,
freezeHeader: true,
virtualization: true,
dataSource: new Smart.DataAdapter({
dataSource: source,
dataFields: fields
}),
columns: get_columns()
}
}
})
// 2. Remove selected rows
const table = document.getElementById('table')
document.querySelector('button').onclick = () => {
table.removeRow(0);
table.removeRow(3);
table.removeRow(11);
}