1.3.0 • Published 1 year ago

hummingbird-component v1.3.0

Weekly downloads
-
License
MIT
Repository
-
Last release
1 year 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

1 year ago

1.2.13

1 year ago

1.2.10

1 year ago

1.2.11

1 year ago

1.2.16

1 year ago

1.2.17

1 year 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

1 year ago

1.2.18

1 year ago

1.2.19

1 year ago

1.3.0

1 year ago

1.2.20

1 year ago

1.2.23

1 year ago

1.2.24

1 year ago

1.2.21

1 year ago

1.2.22

1 year ago

1.2.25

1 year ago

1.2.26

1 year 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

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.16

2 years ago

1.0.22

2 years ago

1.0.21

2 years ago

1.0.20

2 years ago

1.0.26

2 years ago

1.0.25

2 years ago

1.0.24

2 years ago

1.0.23

2 years ago

1.0.29

2 years ago

1.0.28

2 years ago

1.0.27

2 years 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

2 years ago

0.3.2

2 years ago

1.0.14

2 years ago

0.3.1

2 years ago

1.0.13

2 years ago

1.0.12

2 years 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