Table component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

Table component for React using some CSS styles from Bootstrap as well as custom CSS styles.

https://www.npmjs.com/package/library-table-component

Install and save component as a dependency


npm install --save library-table-component

Import component into your app


import Table from 'library-table-component'

Create an array of objects for the table headers and content with the keys being data and content


const tableHeaderData = [
    {
        data: "Name"
    },
    {
        data: "Email"
    },
    {
        data: "Username"
    }
]

const tableContentData = [
    {
        content: [
            {
                data: "John"
            },
            {
                data: "[email protected]"
            },
            {
                data: "@john"
            }
        ]
    },
    {
        content: [
            {
                data: "Jane"
            },
            {
                data: "[email protected]"
            },
            {
                data: "@jane"
            }
        ]
    },
    {
        content: [
            {
                data: "Jack"
            },
            {
                data: "[email protected]"
            },
            {
                data: "@jack"
            }
        ]
    }
]

Render the component with the object arrays we created as well as any other props that are needed


render () {
    const tableHeaderData = [
        {
            data: "Name"
        },
        {
            data: "Email"
        },
        {
            data: "Username"
        }
    ]

    const tableContentData = [
        {
            content: [
                {
                    data: "John"
                },
                {
                    data: "[email protected]"
                },
                {
                    data: "@john"
                }
            ]
        },
        {
            content: [
                {
                    data: "Jane"
                },
                {
                    data: "[email protected]"
                },
                {
                    data: "@jane"
                }
            ]
        },
        {
            content: [
                {
                    data: "Jack"
                },
                {
                    data: "[email protected]"
                },
                {
                    data: "@jack"
                }
            ]
        }
    ]

    return (
        <TableComponent
            tableHeaderData={tableHeaderData}
            tableContentData={tableContentData}
            tableTheme="light"
            tableBorder={false}
            tableStriped={true}
            tableHover={false} />
    )
}

Prop Values
tableHeaderData Object
tableContentData Object
tableTheme light or dark
tableBorder true or false
tableStriped true or false
tableHover true or false

Bronson Dunbar

I'm a WordPress fanatic, a fan of React & AWS and a Sass magician! I also enjoy capturing moments through the lens of my Canon https://adobe.ly/2HkE1SZ

Leave a Reply

Your email address will not be published. Required fields are marked *