https://github.com/afeiship/react-ant-table-filters

Table filters for antd.
https://github.com/afeiship/react-ant-table-filters

ant antd dropdown filter form react table

Last synced: about 2 months ago
JSON representation

Table filters for antd.

• Host: GitHub
• URL: https://github.com/afeiship/react-ant-table-filters
• Owner: afeiship
• Created: 2021-07-24T14:56:42.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-07-27T01:54:10.000Z (over 3 years ago)
• Last Synced: 2024-10-26T22:53:27.468Z (3 months ago)
• Topics: ant, antd, dropdown, filter, form, react, table
• Language: JavaScript
• Homepage:
• Size: 120 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-ant-table-filters

> Table filters for antd.

## packages

```shell

npm i @jswork/antbf-checkbox-group

npm i @jswork/antbf-radio-group

npm i @jswork/antbf-search-box

```

## usage

```jsx

import AntbfCheckboxGroup from '@jswork/antbf-checkbox-group';

export default (props: any) => {

  const filters = AntbfCheckboxGroup.get('keywords', {

    icon: 'search',

    items: [

      { value: 'k1', label: 'label1' },

      { value: 'k2', label: 'label2' },

      { value: 'k3', label: 'label3' }

    ],

    onChange: (event) => {

      console.log('evetnt change:', event.target.value);

    },

    onSubmit: (event) => {

      console.log(event.target.value);

    }

  });

  const [items, setItems] = useState([]);

  const columns = [

    { key: 'id', dataIndex: 'id' },

    { key: 'title', dataIndex: 'title', ...filters }

  ];

  useEffect(() => {

    fetch('https://jsonplaceholder.typicode.com/posts')

      .then((r) => r.json())

      .then((res) => {

        setItems(res.slice(0, 20));

      });

  }, []);

  return (

    

      

    

  );

};

```