# bs-datatable

> A data table based on Bootstrap 5

Latest version **1.1.33** (published 2022-10-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install bs-datatable
pnpm add bs-datatable
yarn add bs-datatable
bun add bs-datatable
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.33 |
| Published | 2022-10-09 |
| First published | 2022-02-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Shahid Ali |
| Maintainers | mvcguy |
| Keywords | data-table, datatable, bootstrap5-based, js |

## Links

- npm: https://www.npmjs.com/package/bs-datatable
- Repository: https://github.com/mvcguy/bs-datatable
- Homepage: https://github.com/mvcguy/bs-datatable#readme
- Issues: https://github.com/mvcguy/bs-datatable/issues
- npm.io page: https://npm.io/package/bs-datatable

## Dependencies (2)

- [bootstrap](https://npm.io/package/bootstrap.md) ^5.2.2
- [@popperjs/core](https://npm.io/package/@popperjs/core.md) ^2.11.2

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.1.33 (latest) — 2022-10-09
- 1.1.32 — 2022-10-09
- 1.1.31 — 2022-10-09
- 1.1.30 — 2022-10-09
- 1.1.29 — 2022-10-09
- 1.1.28 — 2022-10-09
- 1.1.27 — 2022-09-27
- 1.1.26 — 2022-05-08
- 1.1.25 — 2022-05-06
- 1.1.24 — 2022-04-28
- 1.1.23 — 2022-04-28
- 1.1.22 — 2022-04-28
- 1.1.21 — 2022-04-27
- 1.1.20 — 2022-04-26
- 1.1.19 — 2022-04-24
- … 71 more at https://npm.io/package/bs-datatable/versions

## README

# bs-datatable
A data table based on bootstrap 5.

Note: The dependency from jquery has been removed from version 1.1.0

I have prepared a demo application here on github to demonstrate how to use the datatable in your project. Please have a look here.

https://github.com/mvcguy/bs-datatable-testapp.git

# Features
<li class="list-group-item">Very simple to setup, use this example as a guide <a href="https://github.com/mvcguy/bs-datatable-testapp.git">Here</a></li>
      <li class="list-group-item">Supports pagination and inifinite scroll(default)</li>
      <li class="list-group-item">Can be used for in-memory data along with pagination</li>
      <li class="list-group-item">Can be installed via NPM as a package or use the UMD from the dist</li>
      <li class="list-group-item">Support all the html controls</li>
      <li class="list-group-item">The API has methods for getting dirty or all records to send back to server for processing</li>
      
# Installation

NPM:

    npm install bs-datatable
    
# Sample Code:

Typescript

    import { BSFluentBuilder, BSDataTablePagingMetaData } from "bs-datatable"

    export class StaticDemo {

    static run() {
        //
        // sample using bootstrap data grid 
        //

        var tableBuilder = BSFluentBuilder.CreateBuilder()
            .SetDataSourceName('Customers')
            .SetId('grid')
            .SetContainerId('customers_container')
            .IsReadonly(false)
            .IsRemote(false)
            .EnableInfiniteScroll(true)
            .CacheResponses(false);

        // Add columns
        var totCols = 5, totRows = 60;
        for (let i = 0; i < totCols; i++) {
            tableBuilder.AddColumn(col => {
                col.DisplayName = "COL-" + i;
                col.PropName = "col-" + i;
                col.Width = "180px";
                col.DataType = "text";
            });
        }

        // Add some initial data
        tableBuilder.AddInitData(config => {
            for (let i = 0; i < totRows; i++) {

                var record = {};
                for (let j = 0; j < totCols; j++) {
                    record['col-' + j] = 'DATA-' + i + '-' + j;
                }
                config.initData.push(record);
            }
            config.metaData = new BSDataTablePagingMetaData(1, 10, totRows);
        })

        // render data table
        var table = tableBuilder
            .Build()
            .RegisterCallbacks()
            .Render();

        // customize grid actions
        table.gridActions.addAction('btnSave', 'primary', 'save', (e) => {
            console.log('save button is called');
            var records = table.allRecords;
            console.log('All records:')
            console.table(records);

            console.log('Dirty rows:');
            console.table(table.dirtyRecords);
        });

    }
}

# Sample App:
https://github.com/mvcguy/bs-datatable-testapp.git

![image](https://user-images.githubusercontent.com/12786083/163065164-16f20151-3bbf-4358-a81a-b09f59d9befa.png)

---
_Source: https://npm.io/package/bs-datatable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._