# @bithero/react-datatable-bs

> React component for a simple datatable with styles to match bootstrap

Latest version **1.1.0** (published 2022-07-25) · AGPL-3.0-or-later license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @bithero/react-datatable-bs
pnpm add @bithero/react-datatable-bs
yarn add @bithero/react-datatable-bs
bun add @bithero/react-datatable-bs
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-07-25 |
| First published | 2022-07-22 |
| Weekly downloads | 0 |
| License | AGPL-3.0-or-later |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 54.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mai-lapyst |
| Maintainers | mai-lapyst |
| Keywords | front-end, react, react-component, component, components, ecosystem-react |

## Links

- npm: https://www.npmjs.com/package/@bithero/react-datatable-bs
- Repository: https://codeark.it/Bithero-Agency/react-datatable-bs
- Issues: https://codeark.it/Bithero-Agency/react-datatable-bs/issues
- npm.io page: https://npm.io/package/@bithero/react-datatable-bs

## Dependencies (2)

- [@bithero/react-helpers](https://npm.io/package/@bithero/react-helpers.md) ^1.0.0
- [@bithero/simple-search-lib](https://npm.io/package/@bithero/simple-search-lib.md) ^1.0.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2022-07-25
- 1.0.0 — 2022-07-22

## README

# react-datatable-bs

React component for a simple datatable with styles to match bootstrap

## License

This project is licensed under AGPL-3.0. See the `LICENSE` file for more informations.

## Usage

```tsx
import { DataTable } from '@bithero/react-bs-datatable';

import 'bootstrap/dist/css/bootstrap.css';
import '@bithero/react-bs-datatable/dist/datatable.css';

const MyComponent = () => {

    const rows = [
        [ '1', 'John', '24' ],
        [ '2', 'Joe', '29' ],
        [ '3', 'Arthur', '18' ],
        [ '4', 'Bernd', '30' ],
        [ '5', 'Maria', '26' ],
        [ '6', 'Zoe', '19' ],
    ];

    return (
        <DataTable
            headings={['ID', 'Name', 'Age']}
            data={rows}
            pageingEntries={[5,10,15,20,25]}
            translations={{
                perPage: 'entries per page',
                searchPlaceholder: 'Search...',
                info: 'Showing {s} to {e} of {c} entries',
            }}
            sortable
        />
    );
}
```

## Props

Prop                        | Type                                  | Comment
----------------------------|---------------------------------------|------------------------------------------
headings                    | `string[]`                            | The labels to use as headings; also specfies how many columns there are
data                        | `string[][]`                          | Array of rows which in turn are array of cells (strings).
showAddBtn                  | `boolean`                             | Enables an add button in the upper right corner
searchable                  | `boolean`                             | Enables searching of the table
sortable                    | `boolean`                             | Enables sorting of columns
pageingEntries              | `number[]`                            | List of numbers that will be shown as selection in the 'entries per page' dropdown
translations                | `IDataTableTranslations`              | Translations for the few strings in the component; see below
onAddClick                  | `(MouseEvent<>): void`                | Called when the add-button was clicked; see `showAddBtn`
onRowClick                  | `(row_idx, row, event): void`         | Called when an row is clicked
onSearchNamespaceResolve    | `(namespace, row_idx, row): string`   | If specified, this function's result is used instead for namespace lookups for searches performed with `@bithero/simple-search-lib`.

### IDataTableTranslations

Field               | Type      | Comment
--------------------|-----------|----------------------
perPage             | `string`  | Text to display to the right of the 'entries per page' dropdown
searchPlaceholder   | `string`  | Text to use as placeholder for the search input
info                | `string`  | Layout string for the info bar at the bottom left. at the special symbols `{s}`, `{e}` and `{c}` the numbers for the start, the end and the overall count will be inserted respectively.
noRows              | `string`  | Text to display if no data was provided via the data property.
noResults           | `string`  | Text to display if there where no search results.

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