Table component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

Table Of Contents

    Technologies used: React, Bootstrap

    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} />
        )
    }
    PropValues
    tableHeaderDataObject
    tableContentDataObject
    tableThemelight or dark
    tableBordertrue or false
    tableStripedtrue or false
    tableHovertrue 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 *