https://github.com/cubetiq/enhance-antd-table

Still @ant-table but more and ++
https://github.com/cubetiq/enhance-antd-table

antd library react table

Last synced: 3 months ago
JSON representation

Still @ant-table but more and ++

• Host: GitHub
• URL: https://github.com/cubetiq/enhance-antd-table
• Owner: CUBETIQ
• Created: 2020-07-23T06:23:35.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-10-14T20:27:10.000Z (4 months ago)
• Last Synced: 2024-10-15T03:31:37.822Z (4 months ago)
• Topics: antd, library, react, table
• Language: TypeScript
• Homepage: https://cubetiq.github.io/enhance-antd-table
• Size: 6.36 MB
• Stars: 6
• Watchers: 3
• Forks: 1
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CUBETIQ Enhance-Antd-Table

> Stil Ant Design Table but more...

[![NPM](https://img.shields.io/npm/v/@cubetiq/enhance-antd-table.svg)](https://www.npmjs.com/package/@cubetiq/enhance-antd-table) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## ✨ Features

- [x] Columns Visibility.

## Install

Antd v4

```bash

yarn add @cubetiq/enhance-antd-table@^1.0.10

```

Antd v5

```bash

yarn add @cubetiq/enhance-antd-table@^2.0.0

```

## Usage

**[Full tutorial](https://cubetiq.github.io/enhance-antd-table)**

```tsx

import React, { Component } from 'react'

import EnhanceAntdTable from '@cubetiq/enhance-antd-table'

const Example = () => {

  return (

     setModal(true)

      }}

      printButton={true}

      actionDelete={{

        onClick: () => console.log('render from action delete')

      }}

      actionDetails={{

        onClick: () => console.log('render from action details')

      }}

      renderOwnActionMenu={

        

          }>

            Delete

          

        

      }

      bordered={true}

      newColumns={columns}

      newSources={data}

    />

  )

}

```

## Props

- **Everything from AntdProps and plus+**

```tsx

import { props } from 'antd/es/table'

```

- **newColumnsInterface**: Your table column but should include the interface from interface.

```tsx

import { newColumnsInterface } from '@cubetiq/enhance-antd-table'

const columns: Array = [

  {

    title: 'name',

    dataIndex: 'name',

    key: 'name'

  }

]

```

- **newSources**: Your sources data.

```tsx

const data = [

  {

    key: '1',

    name: 'John Brown',

    age: 32,

    address: 'New York No. 1 Lake Park',

    tags: ['nice', 'developer']

  }

]

```

- **createButtonProps**: Create button props.

```tsx

 setModal(true)

  }}

/>

```

- **printButton**: Do you need print in table or not?

```tsx

	 printButton={true}

```

- **searchBy**: Define the search by each column (Not available).

```tsx

	  searchBy={"name"}

```

- **actionDetails**: more props for action details.

```tsx

	actionDetails={{

	  onClick: () => console.log('render from action delete')

	}}

```

- **actionDelete**: more props for action delete.

```tsx

	actionDetails={{

	  onClick: () => console.log('render from action delete')

	}}

```

- **renderOwnActionMenu**: Render own action menu but will be overriden the default action menu.

- Should use **Menu** and **Menu. Item** from ant-design.

```tsx

	renderOwnActionMenu={

	 

	    }>

	      Delete

	    

	 

	}

```

## License

MIT © 2023

- [LyhourChhen](https://github.com/LyhourChhen)

- [vuthPov](https://github.com/vuthpov)

- [Sambo Chea](https://github.com/sombochea)