Table component for React [NPM Package]

  • node module
  • nodejs
  • react
  • react component

Table Of Contents

    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 *