Composing Components

The second example in the sample project uses a React Component called MyTable to render a Bootstrap Table using the WireBootstrap React Component. This component can then be used throughout an application to simplify rendering a Bootstrap Table.

MyTable

The example below shows the code for the MyTable component function. It imports the WireBootstrap React Component.

The WireBootstrap React Component is then configured to render the Bootstrap Table using the component property and display the data configured in the config property passed into MyTable through it's binding via the props parameter.

import WireComponent from "./wire-component";

export default function MyTable(props) {   

    return <WireComponent component="wire.bsTable" config={props.config}>    
                <table className="table table-hover table-striped"></table>
            </WireComponent>;

}

Table2

The Table2 component is defined below. It imports the MyTable component created above along with sample data for the Bootstrap table.

The configuration for the table is created and passed into MyTable via it's config property. This will in tern be passed into the Bootstrap table via the WireBootstrap React Component defined in MyTable.

import MyTable from "./my-table";
import { TableData } from "../sample-data";

export default function Table2() {

    const cfg = { data: new TableData() };

    return <MyTable config={cfg}></MyTable>

}