CUBETIQ Enhance-Antd-Table

Stil Ant Design Table but more...

✨ Features

• Columns Visibility.

Install

Antd v4

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

Antd v5

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

Usage

Full tutorial

import React, { Component } from 'react'

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

const Example = () => {
  return (
    <EnhanceAntdTable
      createButtonProps={{
        onClick: () => setModal(true)
      }}
      printButton={true}
      actionDelete={{
        onClick: () => console.log('render from action delete')
      }}
      actionDetails={{
        onClick: () => console.log('render from action details')
      }}
      renderOwnActionMenu={
        <Menu>
          <Menu.Item key={uuid()} icon={<DeleteOutlined />}>
            Delete
          </Menu.Item>
        </Menu>
      }
      bordered={true}
      newColumns={columns}
      newSources={data}
    />
  )
}

Props

• Everything from AntdProps and plus+

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

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

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

const columns: Array<newColumnsInterface> = [
  {
    title: 'name',
    dataIndex: 'name',
    key: 'name'
  }
]

• newSources: Your sources data.

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer']
  }
]

• createButtonProps: Create button props.

<EnhanceAntdTable
  createButtonProps={{
    onClick: () => setModal(true)
  }}
/>

• printButton: Do you need print in table or not?

	 printButton={true}

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

	  searchBy={"name"}

• actionDetails: more props for action details.

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

• actionDelete: more props for action delete.

	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.

	renderOwnActionMenu={
	 <Menu>
	    <Menu.Item key={uuid()} icon={<DeleteOutlined/>}>
	      Delete
	    </Menu.Item>
	 </Menu>
	}

License

MIT © 2023

• LyhourChhen
• vuthPov
• Sambo Chea