Enhance-Antd-Table

Stil @antd-table but more and ++

✨ Features

• [x] Basic with fix Action column.
• [x] Print the whole tables.
• [x] Adjustment column.
• [x] Search in the tables.
• [ ] Resizable column.
• [ ] Autofit the column mode.

Install

yarn add enhance-antd-table

Usage

Full tutorial

import React, { Component } from 'react'

import EnhanceAntdTable from 'enhance-antd-table'
import 'antd-table-search/dist/index.css'

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'

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

  import { newColumnsInterface } from '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 © 2020

• LyhourChhen
• vuthPov