# react-bootstrap-table-light

> Simple bootstrap table in react.

Latest version **0.1.0** (published 2022-08-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-bootstrap-table-light
pnpm add react-bootstrap-table-light
yarn add react-bootstrap-table-light
bun add react-bootstrap-table-light
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2022-08-08 |
| First published | 2022-08-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 2 |
| Unpacked size | 87 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | DriveSoft |
| Maintainers | drivesoft |
| Keywords | react, bootstrap, table, grid, react-component |

## Links

- npm: https://www.npmjs.com/package/react-bootstrap-table-light
- Repository: https://github.com/DriveSoft/react-bootstrap-table-light
- Issues: https://github.com/DriveSoft/react-bootstrap-table-light/issues
- npm.io page: https://npm.io/package/react-bootstrap-table-light

## Dependencies (2)

- [bootstrap](https://npm.io/package/bootstrap.md) ^5.2.0
- [react-bootstrap](https://npm.io/package/react-bootstrap.md) ^2.5.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2022-08-08

## README

## Summary

Simple bootstrap table in react. 

* Sortable columns 
* Every cell can consists some number of links or buttons (it's possible to use fontawesome icons)
* You can choose date format



## Installation

```
npm install react-bootstrap-table-light
```


## Example

https://codesandbox.io/s/distracted-marco-7ucve5



## Usage

```js
import { BootstrapTable } from "./components/react-bootstrap-table-light";
import { ColumnsStructureTable } from "./components/react-bootstrap-table-light/interfaces";

function App() {
  const columns: ColumnsStructureTable[] = [
    {
      field: "#", // auto-number rows in a column
      headerName: ""
    },
    {
      field: "datetime",
      headerName: "Date",
      width: "40%",
      sortable: true,
      dateTimeOption: "onlyDate" // 'onlyDate' | 'onlyTime' | 'dateTime'
    },
    {
      field: "typeData",
      headerName: "Type",
      width: "35%"
    },
    {
      field: "buttons",
      headerName: "Actions",
      width: "25%"
    }
  ];

  const data = [
    {
      id: 1,
      datetime: "2021-01-01T12:00:00Z",
      typeData: "Inspection",
      buttons: [
        { text: "Edit", idButton: "edit" }, // you can specify any numbers of buttons
        { text: "Delete", idButton: "delete" }
      ]
    },
    {
      id: 2,
      datetime: "2021-01-02T13:00:00Z",
      typeData: "Action",
      buttons: [{ text: "Edit", idButton: "edit" }]
    },
    {
      id: 3,
      datetime: "2021-01-03T13:00:00Z",
      typeData: "Inspection",
      buttons: [
        { iconFA: "fas fa-edit", iconFASize: "15pt", idButton: "edit" }, // you should add cdn font-awesome to use icons.
        { iconFA: "fa fa-camera", iconFASize: "15pt", idButton: "photo" }
      ]
    }
  ];

  const OnClickButtons = (rowData: any, idButton: string) => {
    console.log(rowData, idButton);
  };

  return (
    <BootstrapTable
      data={data}
      columns={columns}
      sortField={"datetime"}
      sortAsc={false}
      OnClickButtons={OnClickButtons}
      //size={"sm"}
      //variant="dark"
    />
  );
}

export default App;
```

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