> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/react/sample-project/composing-components.md).

# Composing Components

The second example in the sample project uses a React Component called `MyTable` to render a [Bootstrap Table](https://www-test.wirebootstrap.com/products/bs-table.html) 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.

```jsx
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`.

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

export default function Table2() {

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

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

}

```