Table

Show or hide columns easily with plugin .table()

ID User Infos Other
Image Firstname Lastname Birthday Postal code Email Date Date Time Time Country City Amount Phone IP address User ID Car Referer
#1 Jean Dupont Jean Dupont 15/04/1985 15:50 75001 jean.dupont@example.com 2024-05-12 2024-05-12 12:10 12:10:00 France Paris € 1 250.75 +33 6 12 34 ** ** 192.168.1.23 Google
#2 Marie Durand Marie Durand 22/08/1990 08:12 69001 marie.durand@example.com 2024-05-12 2024-05-12 17:45 17:45:20 Belgique Bruxelles € 500.00 +34 6 23 45 ** ** 10.20.30.40 Facebook
#3 Luc Martin Luc Martin 10/10/1978 07:12 13001 luc.martin@example.com 2024-03-05 2024-03-05 21:30 21:30:45 France Marseille € 3 750.25 +32 6 34 56 ** ** 172.16.254.12 YouTube
#4 Anne Bernard Anne Bernard 15/01/1982 00:00 33000 anne.bernard@example.com 2023-11-30 2023-11-30 14:12 14:12:00 Suisse Genève € 1 200,75 +33 6 45 67 ** ** 131.234.56.78 Amazon
#5 Paul Petit Paul Petit 30/06/1995 09:00 44000 paul.petit@example.com 2024-01-25 2024-01-25 15:55 15:55:50 France Nantes € 2 500.30 +33 6 56 78 ** ** 88.99.77.66 Twitter
#6 Clara Moreau Clara Moreau 05/05/1987 11:00 06000 clara.moreau@example.com 2023-12-01 2023-12-01 11:20 11:20:15 France Nice € 950.30 +33 6 67 89 ** ** 203.0.113.55 Instagram
#7 Hugo Lefevre Hugo Lefevre 20/07/1975 20:20 67000 hugo.lefevre@example.com 2024-02-28 2024-02-28 08:23 08:23:35 France Strasbourg € 145.60 +33 6 78 90 ** ** 198.51.100.22 LinkedIn
#8 Eva Faure Eva Faure 11/11/1992 09:12 31000 eva.faure@example.com 2024-04-10 2024-04-10 16:00 16:00:12 France Toulouse € 1 500.85 +33 6 89 01 ** ** 123.45.67.89 Reddit
#9 Antoine Roux Antoine Roux 03/09/1989 14:50 38000 antoine.roux@example.com 2023-09-20 2023-09-20 13:45 13:45:00 France Grenoble € 2 750.75 +33 6 90 12 ** ** 75.42.99.101 Wikipedia
#10 Laura Giraud Laura Giraud 25/12/1990 10:20 34000 laura.giraud@example.com 2024-05-12 2024-05-12 09:15 09:15:30 France Montpellier € 1 750.95 +33 6 01 23 ** ** 112.87.54.33 Netflix
Columns
Integration example
let columns = $('.columns'),
    table   = $('.table').table();

table.getColumns().forEach(function(item) {
    let index   = item.index,
        text    = item.text,
        checked = item.visible ? 'checked="checked"' : '';  

    columns.append('<div><label><input class="mh-2" type="checkbox" name="cols[]" value="'+index+'" '+checked+'>'+text+'</label></div>');
});

$('[name="cols[]"').on('input', function() {
    table.columns(this.value, this.checked);
});