README

bs-table is a lightweight and user-friendly table plugin for Bootstrap, designed to efficiently manage tables with a streamlined configuration and extensive customization options.

Table Options Reference

Below is the complete list of options available for bs-table with detailed explanations for each.

General Table Options

Option	Type	Default	Description
`classes`	`string	object`	`'table'`
`toolbar`	`string	$`	`null`
`pagination`	`boolean`	`false`	Enables/disables pagination controls.
`sidePagination`	`string`	`'client'`	Determines if pagination is done on `'client'` or `'server'`.
`paginationVAlign`	`string`	`'bottom'`	Vertical alignment: `'top'`, `'bottom'`, or `'both'`.
`paginationHAlign`	`string`	`'end'`	Horizontal alignment: `'start'` or `'end'`.
`pageNumber`	`number`	`1`	Initial page number when table loads.
`pageSize`	`number`	`10`	Number of rows per page.
`pageList`	`array<number>`	`[5, 10, 25, 50, 100, 200, 'All']`	Dropdown options for the number of rows per page.
`search`	`boolean`	`false`	Adds a search bar for filtering rows.
`url`	`string	function`	`null`
`data`	`array`	`null`	Static array of data objects. Overrides `url` if defined.
`debug`	`boolean`	`false`	Enables debugging mode, which logs events and table interactions.

Sorting Options

Option	Type	Default	Description
`sortName`	`string`	`null`	Specifies the data field to sort by on table initialization.
`sortOrder`	`string`	`'asc'`	Default sorting order. Possible values are `'asc'` (ascending) or `'desc'` (descending).
`onSort`	`function`		Callback triggered when a column is sorted. Receives `field` and `order` as arguments.

Advanced Features

Option	Type	Default	Description
`showFooter`	`boolean`	`false`	Displays a table footer.
`showHeader`	`boolean`	`true`	Controls the visibility of the table header.
`formatNoMatches`	`function`	Custom HTML	Message displayed when no matching rows are found.
`showColumns`	`boolean`	`false`	Displays a dropdown for toggling column visibility.
`minimumCountColumns`	`number`	`1`	Minimum number of visible columns when `showColumns` is enabled.
`customView`	`boolean`	`false`	Enables a custom rendering view for rows.
`onCustomView`	`function`		Callback function for rendering rows when `customView` is enabled.

Column Options

Columns are defined in the columns array. Each column object accepts the following options:

Option	Type	Default	Description
`field`	`string`		The data field to map onto this column.
`title`	`string`		Header text for the column.
`sortable`	`boolean`	`false`	Enables sorting for this column.
`align`	`string`	`'left'`	Horizontal alignment of column cells. Can be `'left'`, `'center'`, or `'right'`.
`valign`	`string`	`'top'`	Vertical alignment. Can be `'top'`, `'middle'`, or `'bottom'`.
`formatter`	`function`		Function to customize the rendering of cell values.
`width`	`string`		Sets the width of the column (e.g., `'100px'`).
`checkbox`	`boolean`	`false`	Adds a checkbox to the column for selection purposes.
`radio`	`boolean`	`false`	Adds a radio button to the column for row selection.

Events

bs-table provides rich event-driven functionalities. Below is a complete list of events:

Event Name	Callback Parameters	Description
`onAll`	`eventName, ...args`	Global event that listens to all table actions.
`onLoadSuccess`	`(rows, $table)`	Triggered when data is successfully loaded into the table.
`onLoadError`		Triggered when there is an error loading data into the table.
`onPreBody`	`(rows, $table)`	Triggered before the table body is rendered.
`onPostBody`	`(rows, $table)`	Triggered after the table body rendering is complete.
`onClickCell`	`(field, value, row, $td)`	Triggered when a specific cell is clicked.
`onClickRow`	`(row, $tr)`	Triggered when a table row is clicked.
`onSort`	`(field, order)`	Triggered when a column is sorted.
`onRefresh`		Triggered when the table is refreshed through the refresh button.

Example: Event Listener

$('#example-table').on('click-row.bs.table', function (event, row, $tr) {
    console.log('Row clicked:', row);
});

How to Customize bs-table

Example Scenario: Full Feature Setup

$('#example-table').bsTable({
    search: true,
    pagination: true,
    pageSize: 15,
    showColumns: true,
    columns: [
        {
            field: 'id',
            title: 'ID',
            sortable: true,
            align: 'center'
        },
        {
            field: 'name',
            title: 'Name',
            formatter: value => `<strong>${value}</strong>`
        },
        {
            field: 'description',
            title: 'Description',
            valign: 'middle'
        }
    ],
    onClickRow: function (row, $tr) {
        alert('Row clicked: ' + JSON.stringify(row));
    }
});

License

Proprietary
Contact the author for licensing inquiries.

Author

Thomas Kirsch
Email: t.kirsch@webcito.de

webcito / bs-table

Maintainers

Details