A table React component

Use in your code Learn more

A table React component.

Use the striped, bordered, condensed and hover props to customise the table.

 

Responsive

Add responsive prop to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

const tableInstance = (
 <Table responsive>
   <thead>
     <tr>
       <th>#</th>
       <th>Table heading</th>
       <th>Table heading</th>
       <th>Table heading</th>
       <th>Table heading</th>
       <th>Table heading</th>
       <th>Table heading</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>1</td>
       <td>Table cell</td>
       <td>Table cell</td>
       <td>Table cell</td>
       <td>Table cell</td>
       <td>Table cell</td>
       <td>Table cell</td>
     </tr>
     <tr>
       <td>2</td>
       <td>Table cell</td>
       <td>Table cell</td>
       <td>Table cell</td>
       <td>Table cell</td>
       <td>Table cell</td>
       <td>Table cell</td>
     </tr>
     <tr>
       <td>3</td>
       <td>Table cell</td>
       <td>Table cell</td>
       <td>Table cell</td>
       <td>Table cell</td>
       <td>Table cell</td>
       <td>Table cell</td>
     </tr>
   </tbody>
 </Table>
);* 
ReactDOM.render(tableInstance, mountNode);
NameTypeDescription
borderedbool
bsClassstring

Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component. Default is table.

condensedbool
hoverbool
responsivebool
stripedbool

Test Summary

Table Should be a tableTests didn't run
Table Should have correct class when stripedTests didn't run
Table Should have correct class when hoverTests didn't run
Table Should have correct class when borderedTests didn't run
Table Should have correct class when condensedTests didn't run
Table Should have responsive wrapperTests didn't run