@kardoos/kardoos-components v2.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.

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]

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>