0.3.13 • Published 3 years ago

react-jmtable v0.3.13

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

Get your data specification ready, your optimized table will pop up!

Install

yarn add react-jmtable

Usage

pass your data like this:

  const SAMPLE_HEADER = [
    { name: 'checkbox', label: '', type: 'checkbox', width: '4%' },
    { name: 'no', label: 'No', type: 'no', width: '6%' },
    { name: 'id', label: 'id', type: 'text', width: '8%' },
    { name: 'username', label: 'user name', type: 'text', width: '9%' },
    { name: 'tel', label: 'tel', type: 'tel', width: '9%' },
    { name: 'issuedAmount', label: 'issued amount', type: 'number', width: '14%' },
    { name: 'memo', label: 'memo', type: 'text', width: '8%' },
    { name: 'createdAt', label: 'created at', type: 'date', width: '8%' },
    { name: 'mod', label: 'Mod', type: 'button', width: '5%' },
    { name: 'del', label: 'del', type: 'del', width: '5%' },
  ];

  const SAMPLE_BODY = [{
    id: 1,
    username: 'Jae M. Choi',
    tel: 000-0000-0000,
    issuedAmount: 1000,
    memo: 'memo',
    mod: '',
    createdAt: new Date(),
  }];

  const { checkedIndexes, JmTable, tableBody } = useJmTable({
    // showSampleData: true,  // If you want to show sample data, set this to true
    tableHeader: SAMPLE_HEADER,
    tableBody: SAMPLE_BODY,
    customStyle: {
      tableWidth: '80%',
      tableBody: {
        background: 'lightBlue'
      }
    },
    handleEvent: {
      mod: e => console.log('mod button clicked', e),
      mod1: () => console.log('mod1 button clicked'),
      del: () => console.log('delete button clicked'),
    },
  });

  return <div className="App">{JmTable}</div>;

Author

šŸ‘¤ Jae M. Choi

Show your support

Give a ā­ļø if this project helped you!


This README was generated with ā¤ļø by readme-md-generator

0.3.13

3 years ago

0.3.12

3 years ago

0.3.11

3 years ago

0.3.10

3 years ago

0.3.9

3 years ago

0.3.8

3 years ago

0.3.7

3 years ago

0.3.6

3 years ago

0.3.5

3 years ago

0.3.4

3 years ago

0.3.3

3 years ago

0.3.2

3 years ago

0.3.1

3 years ago

0.3.0

3 years ago

0.2.36

3 years ago

0.2.35

3 years ago

0.2.34

3 years ago

0.2.33

3 years ago

0.2.32

3 years ago

0.2.31

3 years ago

0.2.29

3 years ago

0.2.28

3 years ago

0.2.27

3 years ago

0.2.26

3 years ago

0.2.25

3 years ago

0.2.24

3 years ago

0.2.23

3 years ago

0.2.22

3 years ago

0.2.21

3 years ago

0.2.20

3 years ago

0.2.19

3 years ago

0.2.18

3 years ago

0.2.17

3 years ago

0.2.16

3 years ago

0.2.15

3 years ago

0.2.14

3 years ago

0.2.13

3 years ago

0.2.12

3 years ago

0.2.11

3 years ago

0.2.1

3 years ago

0.2.0

3 years ago

0.1.9

3 years ago

0.1.8

3 years ago

0.1.7

3 years ago

0.1.6

3 years ago

0.1.5

3 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.2

3 years ago

0.1.0

3 years ago