Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to show BootstrapTable headers and sub headers?

I am working with React Js for Frontend application. I have one table structure like below-

                                                        <BootstrapTable
                                                            classes="table"                                                                 
                                                            data={
                                                                this.props.School
                                                            }                                                               
                                                            columns={[
                                                                {
                                                                    dataField: 'Id',
                                                                    text: 'ID'                                                                      
                                                                },
                                                                {
                                                                    dataField: 'firstName',
                                                                    text: 'First Name',
                                                                    sort: false,                                                                        
                                                                },
                                                                {
                                                                    dataField: 'lastName',
                                                                    text: 'Last Name',
                                                                    sort: false
                                                                },
                                                                {
                                                                    dataField: 'rollNo',
                                                                    text: 'Roll Number',
                                                                    sort: false                                                                 
                                                                },
                                                            ]}
                                                        />

And the table is showing like below-

enter image description here

But I have new requirement to show table structure (headers + sub-headers) like below-
enter image description here

Tags:

2

Answers


  1. 0

    Both Tables are same, output table & desired output table is same, give some breif

    Login or Signup to reply.
  2. 0

    To fulfill your requirement, for showing headers + sub-headers, you can refer to the below react code snippet:

            import BootstrapTable from 'react-bootstrap-table-next';
        import React from 'react';

        // Example data
        const data = [
            { Id: 1, firstName: 'Sunil', lastName: 'Kumar', rollNo: 101 },
            { Id: 2, firstName: 'Amit', lastName: 'Jain', rollNo: 102 }
        ];

        // Custom table header
        const CustomTableHeader = () => (
            <thead>
                <tr>
                    <th colSpan="2" style={{ backgroundColor: 'yellow', fontWeight: 'bold' }}>Part I</th>
                    <th colSpan="2" style={{ backgroundColor: 'lightblue', fontWeight: 'bold' }}>Part II</th>
                </tr>
                <tr>
                    <th style={{ backgroundColor: 'lightgreen', fontWeight: 'bold' }}>ID</th>
                    <th style={{ backgroundColor: 'lightgreen', fontWeight: 'bold' }}>First Name</th>
                    <th style={{ backgroundColor: 'lightgreen', fontWeight: 'bold' }}>Last Name</th>
                    <th style={{ backgroundColor: 'lightgreen', fontWeight: 'bold' }}>Roll Number</th>
                </tr>
            </thead>
        );

        const CustomTable = () => {
            const columns = [
                { dataField: 'Id', text: 'ID' },
                { dataField: 'firstName', text: 'First Name' },
                { dataField: 'lastName', text: 'Last Name' },
                { dataField: 'rollNo', text: 'Roll Number' }
            ];

            return (
                <BootstrapTable
                    keyField="Id"
                    data={data}
                    columns={columns}
                    headerClasses="custom-header"
                    classes="table"
                    headerWrapper={CustomTableHeader}
                />
            );
        };

        export default CustomTable;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search