Красивая таблица с сортировкой

Приведем пример красивой стильной таблицы с возможностью сортировки данных в таблице по колонкам. Чтобы увидеть как работает сортировка - кликните на заголовок колонки - появится указатель на направление сортировки. Чтобы установить такую таблицу на ваш сайт вам потребуется для начала подключить
<script type="text/javascript" src="https://www.google.com/jsapi"></script> Затем скрипт с данными и настройками таблицы:

google.load("visualization", "1", {packages:["table"]});
 google.setOnLoadCallback(drawTable);
 function drawTable() {
 var data = new google.visualization.DataTable();
 data.addColumn('string', 'Имя');
 data.addColumn('number', 'Зарплата');
 data.addColumn('boolean', 'Выплата');
 data.addRows([
 ['Игорь', {v: 10000, f: '$10,000'}, true],
 ['Федор', {v:8000, f: '$8,000'}, false],
 ['Семен', {v: 12500, f: '$12,500'}, true],
 ['Алекс', {v: 7000, f: '$7,000'}, true]
 ]);
 var table = new google.visualization.Table
(document.getElementById('table_div'));
 table.draw(data, {showRowNumber: true});
 }

И конечно же контейнер, в котором вы выгрузите таблицу:
<div id="table_div" ></div> Возможно, вам понадобятся также настройки стиля отображения таблицы. Для каждого сайта это свой набор. Для нашей таблицы из примера, были использованы следующие настройки:

.google-visualization-table-table {
 font-family: arial,helvetica;
 font-size: 10pt;
 cursor: default;
 margin: 0;
 background: white;
 border-spacing: 0;
width:100%;
align:center;
}
#table_div > div > div > table > thead > tr > th:nth-child(1){width:60px;}
#table_div > div > div > table > thead > tr > th:nth-child(4){width:120px;}
table,th,tr,td {text-align:center !important;}