TreeGrid extension for DataTables

DataTables with TreeGrid

+show code

            
var columns = [
{
    title: '',
    target: 0,
    className: 'treegrid-control',
    data: function (item) {
        if (item.children) {
            return '<span>+</span>';
        }
        return '';
    }
},
{
    title: 'Name',
    target: 1,
    data: function (item) {
        return item.name;
    }
},
{
    title: 'Position',
    target: 2,
    data: function (item) {
        return item.position;
    }
},
{
    title: 'Office',
    target: 3,
    data: function (item) {
        return item.office;
    }
},
{
    title: 'Extn.',
    target: 4,
    data: function (item) {
        return item.extn;
    }
},
{
    title: 'Start date',
    target: 5,
    data: function (item) {
        return item.start;
    }
},
{
    title: 'Salary',
    target: 6,
    data: function (item) {
        return item.salary;
    }
}
];

$('#example').DataTable({
    'columns': columns,
    'ajax': './arrays.txt',
    'treeGrid': {
        'left': 10,
        'expandIcon': '<span>+</span>',
        'collapseIcon': '<span>-</span>'
    }
});
            
        

DataTables with TreeGrid and Select

+show code

            
var columns = [...];
$('#exampleWithSelect').DataTable({
    'select': {
        'style': 'multi',
        'selector': 'td:not(:first-child)'
    },
    'columns': columns,
    'ajax': './arrays.txt',
    'treeGrid': {
        'left': 10,
        'expandIcon': '<span>+</span>',
        'collapseIcon': '<span>-</span>'
    }
});