npm package: @kardoos/kardoos-components
Description: Kardoos components package
Author: yderana
Latest version: 2.7.11

# npm-kardoos-components

A npm package kardoos components

## How to build package

Fork this repo, clone it to your local computer, and edit the `package.json` along with every other required file to match your project.
Write the code for your package in TypeScript and Sass, compile it, and publish it to [npm](https://npmjs.com).

To compile your code once, run

- `npm run build`.

To compile your code once and refresh on file change, run

- `npm run start`.

To publish your package to npm, make sure you're logged in the correct account by running

- `npm login`.

Compile your package by running

- `npm run build`

Update the package version accordingly by using

- [`npm version [patch | minor | major]`](https://docs.npmjs.com/about-semantic-versioning)

Then publish your package by running

- `npm publish`

### Happy Building ♡


## How to use

### installation

- `npm install --save @kardoos/kardoos-components`

### example

example to generate a table with custom action field

import components

`import { Table, IColumnProps, Tooltip } from "@kardoos/kardoos-components";`

set table columns

```
const columns: IColumnProps[] = [
    {
      dataIndex: 'no',
      key: 'no',
      title: 'No',
      textAlign: "left",
      alignData: "left",
      columnWidht: "5%",
      render: (text: string, record: any, index: number) => index + 1
    },
    {
      dataIndex: 'name',
      key: 'name',
      title: 'Name',
      sorter: true,
    },
    {
      dataIndex: 'model',
      key: 'model',
      title: 'Model',
      sorter: true,
    },
    {
      dataIndex: 'createdAt',
      key: 'createdAt',
      title: 'Created Date',
      columnWidht: "10%",
      render: (text: string) => moment(text).format('DD MMM YYYY HH:MM')
    },
    {
      dataIndex: 'modifiedAt',
      key: 'modifiedAt',
      title: 'Updated Date',
      columnWidht: "10%",
      render: (text: string) => moment(text).format('DD MMM YYYY HH:MM')
    },
    {
      dataIndex: 'isActive',
      key: 'isActive',
      title: 'Status',
      columnWidht: "8%",
      render: (text: string, record: any) => record.isActive == true ? 'Active' : 'Inactive'
    },
    {
      dataIndex: 'action',
      key: 'action',
      render: (text: string, record: any) => {
        return (
          <div className="bt-table__action">
            <Tooltip text="edit">
              <a href={`/sample/${record.id}`} target="_blank">Edit</a>
            </Tooltip>
          </div>
        );
      },
      columnWidht: "8%",
      title: 'Action',
    },
];
```
Sample data and meta data

```
const dataSource = [
    {
      "id": "5RPlaNe",
      "name": "Corrugated Bag",
      "model": 1,
      "description": null,
      "createdBy": "yoga.derana@kardoos.co.id",
      "createdAt": "2021-04-07T15:53:09.000Z",
      "modifiedBy": null,
      "modifiedAt": "2021-04-07T15:53:09.000Z"
    },
    {
      "id": "nQk1Mkj",
      "name": "Corrugated Bag 2",
      "model": 1,
      "description": null,
      "createdBy": "yoga.derana@kardoos.co.id",
      "createdAt": "2021-04-07T22:11:00.000Z",
      "modifiedBy": null,
      "modifiedAt": "2021-04-07T22:11:00.000Z"
    },
    {
      "id": "yqk0ePW",
      "name": "Corrugated Box",
      "model": 4,
      "description": null,
      "createdBy": "yoga.derana@kardoos.co.id",
      "createdAt": "2021-04-06T19:45:23.000Z",
      "modifiedBy": "yoga.derana@kardoos.co.id",
      "modifiedAt": "2021-04-06T19:48:47.000Z"
    }
];

const metaData = {
    "page": 1,
    "limit": 10,
    "totalDataPage": 3,
    "totalData": 3,
    "totalPages": 1
}
```

Create function for table changes 

```
const onTableChange = () => {
    ... do something
}
```

Set table properties

```
<Table columns={columns}
      dataSource={dataSource}
      className="kardoos-table"
      pagination={{
        currentPage: metaData.page ?? 1,
        defaultPageSize: metaData.limit ?? 10,
        pageSizeOptions: ["10", "25", "50", "10"],
        showSizeChanger: true,
        total: metaData.totalData ?? 0,
      }}
      rowKey="id"
      onChange={onTableChange}
      upperCaseTitle={true}>
</Table>
```