Skip to content

Latest commit

 

History

History
156 lines (118 loc) · 2.9 KB

README.md

File metadata and controls

156 lines (118 loc) · 2.9 KB
Raw

CUBETIQ Enhance-Antd-Table

Stil Ant Design Table but more...

NPM JavaScript Style Guide

✨ 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