# krc-table

> Kraken react controls - data table

Latest version **1.0.5** (published 2020-02-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install krc-table
pnpm add krc-table
yarn add krc-table
bun add krc-table
```

## 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.0.5 |
| Published | 2020-02-09 |
| First published | 2020-02-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Duy Luong Phung |
| Maintainers | luonguit |
| Keywords | reactjs, controls, control, kraken, kraken-team, kraken team, krc, krc-table, data, table |

## Links

- npm: https://www.npmjs.com/package/krc-table
- Repository: https://github.com/DuyLuongPhung/krc-table
- Homepage: https://github.com/DuyLuongPhung/krc-table#readme
- Issues: https://github.com/DuyLuongPhung/krc-table/issues
- npm.io page: https://npm.io/package/krc-table

## Dependencies (1)

- [krc-pagination](https://npm.io/package/krc-pagination.md) ^1.0.1

## 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

- 1.0.5 (latest) — 2020-02-09
- 1.0.4 — 2020-02-09
- 1.0.3 — 2020-02-09
- 1.0.2 — 2020-02-09
- 1.0.1 — 2020-02-09
- 1.0.0 — 2020-02-08

## README

# krc-table

ReactJS controls: Data table by Kraken team!

[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/krc-table.svg?style=flat-square
[npm-url]: http://npmjs.org/package/krc-table
[download-image]: https://img.shields.io/npm/dm/krc-table.svg?style=flat-square
[download-url]: https://npmjs.org/package/krc-table

## install

[![krc-table](https://nodei.co/npm/krc-table.png)](https://npmjs.org/package/krc-table)

# HOW IT WORKS

### install package

```
npm install --save krc-table
```

### import styles

```
import 'krc-table/styles.css';
```

### usage

```
   import { DataTable } from "krc-table";
   import 'krc-table/styles.css';

   const customProductPrice = (item) => {
      return Number(item.price.toFixed(1)).toLocaleString();
   }

   const selectedProductHeaders: any[] = [
      {
         text: "Id",
         binding: "id"
      },
      {
         text: "Full Name",
         binding: "name"
      },
      {
         text: "Description",
         binding: "description"
      },
      {
         text: "Origin Price",
         binding: "price",
         template: customProductPrice
      }
   ];

   const selectedProductActions = [
      {
         type: "Update",
         className: "btn btn-primary btn-sm",
         emitBinding: "id" // emit item id when firing
      },
      {
         type: "Delete",
         className: "btn btn-danger btn-sm",
         emitBinding: "id" //// emit item id when firing
      }
   ];

   const products = "products": [
      {
         "id": 1,
         "name": "Produdct 1",
         "description": "description",
         "image": "https://img.theculturetrip.com/x/smart/wp-content/uploads/2018/03/cosmetics.jpg",
         "price": 500000
      },
      {
         "id": 2,
         "name": "Produdct 2",
         "description": "description",
         "image": "https://img.theculturetrip.com/x/smart/wp-content/uploads/2018/03/cosmetics.jpg",
         "price": 50
      },
      {
         "id": 3,
         "name": "Produdct 3",
         "description": "description",
         "image": "https://img.theculturetrip.com/x/smart/wp-content/uploads/2018/03/cosmetics.jpg",
         "price": 50
      },
   ];

   const pageSize = 2;
   const pageCount = Math.floor(products.length / pageSize) + (products.length % pageSize === 0 ? 0 : 1);

   onActionClick = e => {
      if ("Update" === e.type) {
         console.log("update item click", e);
      }
      if ("Delete" === e.type) {
         console.log("delete item click", e);
      }
   };

   // paging select new page
   onPageChanged = page => {
      console.log("click new paging ", page);
   };

```

```
   <DataTable
      headers={selectedProductHeaders}
      dataSources={products}
      pageCount={pageCount}
      rowActions={selectedProductActions}
      onActionClick={onActionClick}
      onPageChanged={onPageChanged}
   />
```

# API references

### Properties

| Name          | Type     | Default | Description                               |
| ------------- | -------- | ------- | ----------------------------------------- |
| headers       | Object[] | []      | Items templates define header and binding |
| rowActions    | Object[] | []      | Item actions definitions                  |
| dataSources   | Object[] | []      | Data items                                |
| pageCount     | number   | 1       | Total page view counts for paging         |
| onActionClick | Function | null    | Item action click handler                 |
| onPageChanged | Function | null    | Select new page change handler            |

# License

krc-table is released under the MIT license.

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