1.3.0 • Published 9 months ago

hummingbird-component v1.3.0

Weekly downloads
-
License
MIT
Repository
-
Last release
9 months ago

Hummingbird component

This component library object is react quickly like as most compact library to act fast compare to other library.

How to start

run below command

npm i hummingbird-component

Using like that

1. Basic Usage.

1.1 Table

1.2 Sourcecode

import {HummingTable} from "hummingbird-component"

...
  let dataLength = 15;

  const columnConfig1 = [
    {
      dataKey:"id",
      label:"아이디",
      width:"12%",
  },
  {
    dataKey:"name",
    label:"이름",
    width:"12%",
  },
  {
    dataKey:"age",
    label:"나이",
    width:"120px",
  },
  {
    dataKey:"street",
    label:"세부 주소1",
    width:"12%",
  },
  {
    dataKey:"building",
    label:"동",
    width:"120px",
  },
  {
    dataKey:"doorNo",
    label:"호수",
    width:"120px",
    
  },
  {
    dataKey:"companyAddress",
    label:"회사 주소",
    width:"180px",
    //width:"18%",
  },
  {
    dataKey:"companyName",
    label:"회사 명",
    width:"120px",
  }
]

let tmpData = []
for(let i = 0 ; i < dataLength ; i++)
{
  
  if(i === 3)
  {
    tmpData.push({
      key: i,
      id : "n"+i,
      name : "sim"+i,
      age: i,
      street: "yeongtong-3oasfdasfasdfasdfasdfasdfasdfasdfasdf",
      building: i+"824",
      doorNo: (i+1)+"503",
      companyAddress: "suwon-si",
      companyName: <button>{"SK"+i}</button>//"SK"+i
    })
  }
  else
  {
    tmpData.push({
      key: i,
      id : "n"+i,
      name : "sim"+i,
      age: i,
      street: "yeongtong-3o",
      building: i+"824",
      doorNo: (i+1)+"503",
      companyAddress: "suwon-si",
      companyName: <button>{"SK"+i}</button>//"SK"+i
    })
  }
}


const [data, setData] = useState(tmpData)

...

return (
    <div className="App">
      test
      <HummingTable 
        columns={columnConfig1}
        dataSource={data}
      ></HummingTable>
      <button onClick={cliskButton}>click</button>
    </div>
  );

2. Column Sort Usage.

2.1 Table

2.2 Sourcecode

import {HummingTable} from "hummingbird-component"

...
  let dataLength = 15;

  const columnConfig1 = [
    {
      dataKey:"id",
      label:"아이디",
      width:"12%",
      sortable: true,
  },
  {
    dataKey:"name",
    label:"이름",
    width:"12%",
    sortable: true,
  },
  {
    dataKey:"age",
    label:"나이",
    width:"120px",
  },
  {
    dataKey:"street",
    label:"세부 주소1",
    width:"12%",
  },
  {
    dataKey:"building",
    label:"동",
    width:"120px",
  },
  {
    dataKey:"doorNo",
    label:"호수",
    width:"120px",
    
  },
  {
    dataKey:"companyAddress",
    label:"회사 주소",
    width:"180px",
  },
  {
    dataKey:"companyName",
    label:"회사 명",
    width:"120px",
  }
]

let tmpData = []
for(let i = 0 ; i < dataLength ; i++)
{
  
  if(i === 3)
  {
    tmpData.push({
      key: i,
      id : "n"+i,
      name : "sim"+i,
      age: i,
      street: "yeongtong-3oasfdasfasdfasdfasdfasdfasdfasdfasdf",
      building: i+"824",
      doorNo: (i+1)+"503",
      companyAddress: "suwon-si",
      companyName: <button>{"SK"+i}</button>//"SK"+i
    })
  }
  else
  {
    tmpData.push({
      key: i,
      id : "n"+i,
      name : "sim"+i,
      age: i,
      street: "yeongtong-3o",
      building: i+"824",
      doorNo: (i+1)+"503",
      companyAddress: "suwon-si",
      companyName: <button>{"SK"+i}</button>//"SK"+i
    })
  }
}


const [data, setData] = useState(tmpData)

...

return (
    <div className="App">
      test
      <HummingTable 
        columns={columnConfig1}
        dataSource={data}
      ></HummingTable>
      <button onClick={cliskButton}>click</button>
    </div>
  );

3. Column Filter Usage.

3.1 Table

3.2 Sourcecode

import {HummingTable} from "hummingbird-component"

...
  let dataLength = 15;

  const columnConfig1 = [
    {
      dataKey:"id",
      label:"아이디",
      width:"12%",
      sortable: true,
      filter: true
  },
  {
    dataKey:"name",
    label:"이름",
    width:"12%",
    sortable: true,
  },
  {
    dataKey:"age",
    label:"나이",
    width:"120px",
    filter: true
  },
  {
    dataKey:"street",
    label:"세부 주소1",
    width:"12%",
  },
  {
    dataKey:"building",
    label:"동",
    width:"120px",
  },
  {
    dataKey:"doorNo",
    label:"호수",
    width:"120px",
    
  },
  {
    dataKey:"companyAddress",
    label:"회사 주소",
    width:"180px",
  },
  {
    dataKey:"companyName",
    label:"회사 명",
    width:"120px",
  }
]

let tmpData = []
for(let i = 0 ; i < dataLength ; i++)
{
  
  if(i === 3)
  {
    tmpData.push({
      key: i,
      id : "n"+i,
      name : "sim"+i,
      age: i,
      street: "yeongtong-3oasfdasfasdfasdfasdfasdfasdfasdfasdf",
      building: i+"824",
      doorNo: (i+1)+"503",
      companyAddress: "suwon-si",
      companyName: <button>{"SK"+i}</button>//"SK"+i
    })
  }
  else
  {
    tmpData.push({
      key: i,
      id : "n"+i,
      name : "sim"+i,
      age: i,
      street: "yeongtong-3o",
      building: i+"824",
      doorNo: (i+1)+"503",
      companyAddress: "suwon-si",
      companyName: <button>{"SK"+i}</button>//"SK"+i
    })
  }
}


const [data, setData] = useState(tmpData)

...

return (
    <div className="App">
      test
      <HummingTable 
        columns={columnConfig1}
        dataSource={data}
      ></HummingTable>
      <button onClick={cliskButton}>click</button>
    </div>
  );

4. Width/Height Properties Usage.

4.1 Table

4.2 Sourcecode

import {HummingTable} from "hummingbird-component"

...
  let dataLength = 15;

  const columnConfig1 = [
    {
      dataKey:"id",
      label:"아이디",
      width:"12%",
      sortable: true,
      filter: true
  },
  {
    dataKey:"name",
    label:"이름",
    width:"12%",
    sortable: true,
  },
  {
    dataKey:"age",
    label:"나이",
    width:"120px",
    filter: true
  },
  {
    dataKey:"street",
    label:"세부 주소1",
    width:"12%",
  },
  {
    dataKey:"building",
    label:"동",
    width:"120px",
  },
  {
    dataKey:"doorNo",
    label:"호수",
    width:"120px",
    
  },
  {
    dataKey:"companyAddress",
    label:"회사 주소",
    width:"180px",
  },
  {
    dataKey:"companyName",
    label:"회사 명",
    width:"120px",
  }
]

let tmpData = []
for(let i = 0 ; i < dataLength ; i++)
{
  
  if(i === 3)
  {
    tmpData.push({
      key: i,
      id : "n"+i,
      name : "sim"+i,
      age: i,
      street: "yeongtong-3oasfdasfasdfasdfasdfasdfasdfasdfasdf",
      building: i+"824",
      doorNo: (i+1)+"503",
      companyAddress: "suwon-si",
      companyName: <button>{"SK"+i}</button>//"SK"+i
    })
  }
  else
  {
    tmpData.push({
      key: i,
      id : "n"+i,
      name : "sim"+i,
      age: i,
      street: "yeongtong-3o",
      building: i+"824",
      doorNo: (i+1)+"503",
      companyAddress: "suwon-si",
      companyName: <button>{"SK"+i}</button>//"SK"+i
    })
  }
}


const [data, setData] = useState(tmpData)

...

return (
    <div className="App">
      test
      <HummingTable 
        width={"80%"}
        height={"100%"}
        columns={columnConfig1}
        dataSource={data}
      ></HummingTable>
      <button onClick={cliskButton}>click</button>
    </div>
  );

5. Header Style Properties Usage.

5.1 Table

5.2 Sourcecode

import {HummingTable} from "hummingbird-component"

...
  let dataLength = 15;
  
  const headerStyle = {
    //가능한 옵션 : backgroundColor, color
    backgroundColor: "#ACC",
    
  }

  const columnConfig1 = [
    {
      dataKey:"id",
      label:"아이디",
      width:"12%",
      sortable: true,
      filter: true
  },
  {
    dataKey:"name",
    label:"이름",
    width:"12%",
    sortable: true,
  },
  {
    dataKey:"age",
    label:"나이",
    width:"120px",
    filter: true
  },
  {
    dataKey:"street",
    label:"세부 주소1",
    width:"12%",
  },
  {
    dataKey:"building",
    label:"동",
    width:"120px",
  },
  {
    dataKey:"doorNo",
    label:"호수",
    width:"120px",
    
  },
  {
    dataKey:"companyAddress",
    label:"회사 주소",
    width:"180px",
  },
  {
    dataKey:"companyName",
    label:"회사 명",
    width:"120px",
  }
]

let tmpData = []
for(let i = 0 ; i < dataLength ; i++)
{
  
  if(i === 3)
  {
    tmpData.push({
      key: i,
      id : "n"+i,
      name : "sim"+i,
      age: i,
      street: "yeongtong-3oasfdasfasdfasdfasdfasdfasdfasdfasdf",
      building: i+"824",
      doorNo: (i+1)+"503",
      companyAddress: "suwon-si",
      companyName: <button>{"SK"+i}</button>//"SK"+i
    })
  }
  else
  {
    tmpData.push({
      key: i,
      id : "n"+i,
      name : "sim"+i,
      age: i,
      street: "yeongtong-3o",
      building: i+"824",
      doorNo: (i+1)+"503",
      companyAddress: "suwon-si",
      companyName: <button>{"SK"+i}</button>//"SK"+i
    })
  }
}


const [data, setData] = useState(tmpData)

...

return (
    <div className="App">
      test
      <HummingTable 
        width={"80%"}
        height={"100%"}
        columns={columnConfig1}
        headerStyle={headerStyle}
        dataSource={data}
      ></HummingTable>
      <button onClick={cliskButton}>click</button>
    </div>
  );

6. Title Properties Usage.

6.1 Table

6.2 Sourcecode

import {HummingTable} from "hummingbird-component"

...
  let dataLength = 15;
  
  const headerStyle = {
    //가능한 옵션 : backgroundColor, color
    backgroundColor: "#ACC",
    
  }

  const columnConfig1 = [
    {
      dataKey:"id",
      label:"아이디",
      width:"12%",
      sortable: true,
      filter: true
  },
  {
    dataKey:"name",
    label:"이름",
    width:"12%",
    sortable: true,
  },
  {
    dataKey:"age",
    label:"나이",
    width:"120px",
    filter: true
  },
  {
    dataKey:"street",
    label:"세부 주소1",
    width:"12%",
  },
  {
    dataKey:"building",
    label:"동",
    width:"120px",
  },
  {
    dataKey:"doorNo",
    label:"호수",
    width:"120px",
    
  },
  {
    dataKey:"companyAddress",
    label:"회사 주소",
    width:"180px",
  },
  {
    dataKey:"companyName",
    label:"회사 명",
    width:"120px",
  }
]

let tmpData = []
for(let i = 0 ; i < dataLength ; i++)
{
  
  if(i === 3)
  {
    tmpData.push({
      key: i,
      id : "n"+i,
      name : "sim"+i,
      age: i,
      street: "yeongtong-3oasfdasfasdfasdfasdfasdfasdfasdfasdf",
      building: i+"824",
      doorNo: (i+1)+"503",
      companyAddress: "suwon-si",
      companyName: <button>{"SK"+i}</button>//"SK"+i
    })
  }
  else
  {
    tmpData.push({
      key: i,
      id : "n"+i,
      name : "sim"+i,
      age: i,
      street: "yeongtong-3o",
      building: i+"824",
      doorNo: (i+1)+"503",
      companyAddress: "suwon-si",
      companyName: <button>{"SK"+i}</button>//"SK"+i
    })
  }
}


const [data, setData] = useState(tmpData)

...

return (
    <div className="App">
      test
      <HummingTable 
        width={"80%"}
        height={"100%"}
        columns={columnConfig1}
        dataSource={data}
        headerStyle={headerStyle}
        title={"table title test"}
      ></HummingTable>
      <button onClick={cliskButton}>click</button>
    </div>
  );

7. Display Rows / zebra Properties Usage.

7.1 Table

7.2 Sourcecode

import {HummingTable} from "hummingbird-component"

...
  let dataLength = 15;
  
  const headerStyle = {
    //가능한 옵션 : backgroundColor, color
    backgroundColor: "#ACC",
    
  }

  const columnConfig1 = [
    {
      dataKey:"id",
      label:"아이디",
      width:"12%",
      sortable: true,
      filter: true
  },
  {
    dataKey:"name",
    label:"이름",
    width:"12%",
    sortable: true,
  },
  {
    dataKey:"age",
    label:"나이",
    width:"120px",
    filter: true
  },
  {
    dataKey:"street",
    label:"세부 주소1",
    width:"12%",
  },
  {
    dataKey:"building",
    label:"동",
    width:"120px",
  },
  {
    dataKey:"doorNo",
    label:"호수",
    width:"120px",
    
  },
  {
    dataKey:"companyAddress",
    label:"회사 주소",
    width:"180px",
  },
  {
    dataKey:"companyName",
    label:"회사 명",
    width:"120px",
  }
]

let tmpData = []
for(let i = 0 ; i < dataLength ; i++)
{
  
  if(i === 3)
  {
    tmpData.push({
      key: i,
      id : "n"+i,
      name : "sim"+i,
      age: i,
      street: "yeongtong-3oasfdasfasdfasdfasdfasdfasdfasdfasdf",
      building: i+"824",
      doorNo: (i+1)+"503",
      companyAddress: "suwon-si",
      companyName: <button>{"SK"+i}</button>//"SK"+i
    })
  }
  else
  {
    tmpData.push({
      key: i,
      id : "n"+i,
      name : "sim"+i,
      age: i,
      street: "yeongtong-3o",
      building: i+"824",
      doorNo: (i+1)+"503",
      companyAddress: "suwon-si",
      companyName: <button>{"SK"+i}</button>//"SK"+i
    })
  }
}


const [data, setData] = useState(tmpData)

...

return (
    <div className="App">
      test
      <HummingTable 
        width={"80%"}
        height={"100%"}
        columns={columnConfig1}
        dataSource={data}
        headerStyle={headerStyle}
        title={"table title test"}
        displayedRowNum="10"
        displayRowNumsYn={true}
        zebra
      ></HummingTable>
      <button onClick={cliskButton}>click</button>
    </div>
  );

8. Row Selection / SizeChanger / pagination Properties Usage.

8.1 Table

8.2 Sourcecode

import {HummingTable} from "hummingbird-component"

...
  let dataLength = 15;
  
  const headerStyle = {
    //가능한 옵션 : backgroundColor, color
    backgroundColor: "#ACC",
    
  }

  const columnConfig1 = [
    {
      dataKey:"id",
      label:"아이디",
      width:"12%",
      sortable: true,
      filter: true
  },
  {
    dataKey:"name",
    label:"이름",
    width:"12%",
    sortable: true,
  },
  {
    dataKey:"age",
    label:"나이",
    width:"120px",
    filter: true
  },
  {
    dataKey:"street",
    label:"세부 주소1",
    width:"12%",
  },
  {
    dataKey:"building",
    label:"동",
    width:"120px",
  },
  {
    dataKey:"doorNo",
    label:"호수",
    width:"120px",
    
  },
  {
    dataKey:"companyAddress",
    label:"회사 주소",
    width:"180px",
  },
  {
    dataKey:"companyName",
    label:"회사 명",
    width:"120px",
  }
]

let tmpData = []
for(let i = 0 ; i < dataLength ; i++)
{
  
  if(i === 3)
  {
    tmpData.push({
      key: i,
      id : "n"+i,
      name : "sim"+i,
      age: i,
      street: "yeongtong-3oasfdasfasdfasdfasdfasdfasdfasdfasdf",
      building: i+"824",
      doorNo: (i+1)+"503",
      companyAddress: "suwon-si",
      companyName: <button>{"SK"+i}</button>//"SK"+i
    })
  }
  else
  {
    tmpData.push({
      key: i,
      id : "n"+i,
      name : "sim"+i,
      age: i,
      street: "yeongtong-3o",
      building: i+"824",
      doorNo: (i+1)+"503",
      companyAddress: "suwon-si",
      companyName: <button>{"SK"+i}</button>//"SK"+i
    })
  }
}


const [data, setData] = useState(tmpData)

...

return (
    <div className="App">
      test
      <HummingTable 
        width={"80%"}
        height={"100%"}
        columns={columnConfig1}
        dataSource={data}
        headerStyle={headerStyle}
        title={"table title test"}
        displayedRowNum="10"
        displayRowNumsYn={true}
        zebra
        sizeChanger={[5, 10, 20, 40]}
        rowSelection={{
          type: rowSelectionType,
          onChange: (selectedRows) => {
            console.log(selectedRows)
          }
        }}
        pagination={{
          //dataLength: 1000,
          onClick: (pageNum) => {
            console.log(pageNum)
          }
        }}
      ></HummingTable>
      <button onClick={cliskButton}>click</button>
    </div>
  );

9. Group Header Usage.

9.1 Table

9.2 Sourcecode

import {HummingTable} from "hummingbird-component"

...
  let dataLength = 15;
  
  const headerStyle = {
    //가능한 옵션 : backgroundColor, color
    backgroundColor: "#ACC",
    
  }

  const columnConfig1 = [
    {
      dataKey:"id",
      label:"아이디",
      width:"8%",
      sortable: true,
      filter: true,
    },
    {
      dataKey:"name",
      label:"이름",
      width:"8%",
      sortable: true,
    },
    {
      dataKey:"other",
      label:"그외 정보",
      width:"50%",
      sortable: false,
      children: [
        {
          dataKey:"age",
          label:"나이",
          width:"20%",
          sortable: false,
        },
        {
          dataKey:"address",
          label:"주소",
          width:"30%",
          sortable: false,
          children: [
            {
              dataKey:"street",
              label:"세부 주소1",
              width:"20%",
              sortable: false,
            },
            {
              dataKey:"block",
              label:"세부 주소2",
              width:"10%",
              sortable: false,
              children: [
                {
                  dataKey:"building",
                  label:"동",
                  width:"5%",
                  sortable: false,
                },
                {
                  dataKey:"doorNo",
                  label:"호수",
                  width:"5%",
                  sortable: false,
                }
              ]
            }
          ]
        }
      ]
    },
    {
      dataKey:"company",
      label:"회사 정보",
      width:"34%",
      sortable: false,
      children:[
        {
          dataKey:"companyAddress",
          label:"회사 주소",
          width:"17%",
          sortable: false,
        },
        {
          dataKey:"companyName",
          label:"회사 명",
          width:"17%",
          sortable: false,
        }
      ]
    }
]

let tmpData = []
for(let i = 0 ; i < dataLength ; i++)
{
  
  if(i === 3)
  {
    tmpData.push({
      key: i,
      id : "n"+i,
      name : "sim"+i,
      age: i,
      street: "yeongtong-3oasfdasfasdfasdfasdfasdfasdfasdfasdf",
      building: i+"824",
      doorNo: (i+1)+"503",
      companyAddress: "suwon-si",
      companyName: <button>{"SK"+i}</button>//"SK"+i
    })
  }
  else
  {
    tmpData.push({
      key: i,
      id : "n"+i,
      name : "sim"+i,
      age: i,
      street: "yeongtong-3o",
      building: i+"824",
      doorNo: (i+1)+"503",
      companyAddress: "suwon-si",
      companyName: <button>{"SK"+i}</button>//"SK"+i
    })
  }
}


const [data, setData] = useState(tmpData)

...

return (
    <div className="App">
      test
      <HummingTable 
        width={"80%"}
        height={"100%"}
        columns={columnConfig1}
        dataSource={data}
        headerStyle={headerStyle}
        title={"table title test"}
        displayedRowNum="10"
        displayRowNumsYn={true}
        zebra
        sizeChanger={[5, 10, 20, 40]}
        rowSelection={{
          type: rowSelectionType,
          onChange: (selectedRows) => {
            console.log(selectedRows)
          }
        }}
        pagination={{
          //dataLength: 1000,
          onClick: (pageNum) => {
            console.log(pageNum)
          }
        }}
      ></HummingTable>
      <button onClick={cliskButton}>click</button>
    </div>
  );
@faker-js/faker@testing-library/jest-dom@testing-library/react@testing-library/user-eventclassnamesfakergh-pagesreactreact-domreact-scriptsstyle-injectweb-vitals
1.2.0

1 year ago

1.2.8

1 year ago

1.2.7

1 year ago

1.2.6

1 year ago

1.2.5

1 year ago

1.2.4

1 year ago

1.2.3

1 year ago

1.2.2

1 year ago

1.2.1

1 year ago

1.2.12

12 months ago

1.2.13

12 months ago

1.2.10

12 months ago

1.2.11

12 months ago

1.2.16

12 months ago

1.2.17

12 months ago

1.1.9

1 year ago

1.1.8

1 year ago

1.1.7

1 year ago

1.1.6

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.10

1 year ago

1.2.9

12 months ago

1.2.18

12 months ago

1.2.19

12 months ago

1.3.0

9 months ago

1.2.20

12 months ago

1.2.23

12 months ago

1.2.24

12 months ago

1.2.21

12 months ago

1.2.22

12 months ago

1.2.25

12 months ago

1.2.26

12 months ago

1.1.3

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.1.2

1 year ago

1.0.42

1 year ago

1.0.39

1 year ago

1.0.38

1 year ago

1.0.40

1 year ago

1.0.41

1 year ago

1.0.37

1 year ago

1.0.36

1 year ago

1.0.19

1 year ago

1.0.18

1 year ago

1.0.17

1 year ago

1.0.16

1 year ago

1.0.22

1 year ago

1.0.21

1 year ago

1.0.20

1 year ago

1.0.26

1 year ago

1.0.25

1 year ago

1.0.24

1 year ago

1.0.23

1 year ago

1.0.29

1 year ago

1.0.28

1 year ago

1.0.27

1 year ago

1.0.33

1 year ago

1.0.32

1 year ago

1.0.31

1 year ago

1.0.30

1 year ago

1.0.35

1 year ago

1.0.34

1 year ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

0.3.0

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

1.0.15

1 year ago

0.3.2

2 years ago

1.0.14

1 year ago

0.3.1

2 years ago

1.0.13

1 year ago

1.0.12

1 year ago

0.3.3

2 years ago

0.2.1

2 years ago

0.2.2

2 years ago

0.1.10

2 years ago

0.1.9

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.6

2 years ago

0.1.4

2 years ago

0.1.5

2 years ago

0.1.2

2 years ago

0.1.3

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago