# Modal

## Shows using FooTable with Bootstraps' modal component.

#### Notes

- This example makes use of Bootstraps' modal component.
- The base table in the example below is a clone of the showcase example to demonstrate that various table operations such as filtering, sorting, paging still function correctly.
- Seeing as the modal is a lot smaller than the viewport and the columns.json file uses the default breakpoints, the below example makes use of the useParentWidth option so the columns collapse accordingly.

#### Modal title

    jQuery(function($){
    	$('#modal-example-1').footable({
    		"useParentWidth": true,
    		"columns": $.get('columns.json'),
    		"rows": $.get('rows.json')
    	});
    });

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    	Launch demo modal
    </button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    	<div class="modal-dialog" role="document">
    		<div class="modal-content">
    			<div class="modal-header">
    				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    				<h4 class="modal-title" id="myModalLabel">Modal title</h4>
    			</div>
    			<div class="modal-body">
    				<table id="modal-example-1" class="table" data-paging="true" data-filtering="true" data-sorting="true"></table>
    			</div>
    			<div class="modal-footer">
    				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    			</div>
    		</div>
    	</div>
    </div>