Создание удобной таблицы для отображения данных средствами HTML, JavaScript. Таблицу мы будем делать используя jQuery-плагин «FlexiGrid».

Более чем уверен, что опытные программисты уже знакомы с этим плагином, но как показывает опыт, некоторые все же не знают о подобных вещах.

Это собственно аналог всем известного плагина jqGrid для jQuery.

Вот его основные функции описанные создателем:

• Ресайзинг колонок

• Ресайзинг таблицы

• Сортировка данных по заголовкам

• Красивая тема оформления

• Можно конвертировать обычную таблицу

• Использование AJAX — источника данных (XML и JSON)

• Постраничная навигация

• Показ/скрытие колонок

• Панель инструментов

• Поиск

• Доступный API

• Скрытие/показ таблицы

• Динамическое добавление/изменение GUI

По своей сути тоже самое, что и популярный jqGrid, только в другом интерфейсе. Тут уже выбор зависит от того, какой плагин больше глаз радует =) хотя отличия все же есть, но о них можно узнать если использовать какие-либо более сложные функции или нужна более тонкая кастомизация.

Плагин был протестирован в следующих браузерах: IE6/IE7, Firefox 2, Opera 9.x, Safari 3.0

Очень понравилась возможность генерации FlexGrid из обычной HTML-таблицы. К примеру есть у нас один могильничек одна таблица:

<table class="our_tbl">
        <thead>
		<tr>
                <th>ID</th>
                <th>NAME</th>
                <th>CATEGORY</th>
                <th>DATE</th>
            </tr>
    </thead>
    <tbody>
                <tr>
                <td>This is data 1 with overflowing content</td>
                <td>This is data 2</td>
                <td>This is data 3</td>
                <td>This is data 4</td>
            </tr>
	</tbody>
</table>



Для преобразования в FlexGrid-таблицу достаточно такого кода:
$('.our_tbl').flexigrid();



Для того, чтобы использовать эту фичу нужно:
Сам jQuery (http://www.jquery.com/)
FlexiGrid (http://www.flexigrid.info/flexigrid.zip)

Рабочий пример с реализацией на PHP
PHP-код там довольно тривиальный и далёк от идеала, но общий принцип просматривается ;)

Ну а вот типичный пример настройки клиентской части:

$("#flex1").flexigrid
                        (
                        {
                        url: 'post2.php',
                        dataType: 'json',
                        colModel : [
                                {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
                                {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
                                {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
                                {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
                                {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
                                ],
                        buttons : [
                                {name: 'Add', bclass: 'add', onpress : test},
                                {name: 'Delete', bclass: 'delete', onpress : test},
                                {separator: true}
                                ],
                        searchitems : [
                                {display: 'ISO', name : 'iso'},
                                {display: 'Name', name : 'name', isdefault: true}
                                ],
                        sortname: "iso",
                        sortorder: "asc",
                        usepager: true,
                        title: 'Countries',
                        useRp: true,
                        rp: 15,
                        showTableToggleBtn: true,
                        width: 700,
                        height: 200
                        }
                        );  

Подобного рода таблицы как правило не очень-то расшияемы, но например страницы админ-панелей делать очень удобно, а главное быстро ;)