yadcf 2.0 showcase

(using yadcf 2.0.1.beta.8)

Its a work in progress, feel free to submit yadcf 2 / Datatables 2 issues on github

DOM source example

Custom	Numbers	Dates	Values	Tags
Happy :)	1000	01/24/2014	a_value,b_value	Tag1Tag2
Joy	22	02/20/2014	b_value,c_value	Tag1Tag3
01	33	02/26/2014	a_value	Tag2Tag3
Sad	44	02/11/2014	b_value	Tag2
777	55	02/29/2014	a_value,b_value	Tag1Tag2
Jan	111	11/24/2014	c_value,d_value	Tag2
:)	222	02/03/2014	e_value,f_value	Tag3Tag4Tag5
:(	33	02/03/2014	a_value,bb_value	Tag5
:D	444	03/24/2014	a_value,f_value	Tag4
:'(	55	03/22/2014	a_value,c_value	Tag1Tag2
Never!!!	300	02/20/2014	a_value,b_value	Tag1Tag3
Finally :-]	242	02/04/2014	d_value,aa_value	Tag1
Why :(	703	02/05/2014	a_value,c_value	Tag1Tag2
Arr...	604	02/25/2014	a_value,bb_value	Tag1Tag2
H A P P Y :)	550	02/01/2014	c_value,e_value	Tag2
Bingo	901	02/02/2014	a_value,e_value	Tag1

Code sample for the above example

function myCustomFilterFunction(filterVal, columnVal) {
    var found;
    if (columnVal === '') {
      return true;
    }
    switch (filterVal) {
      case 'happy':
        found = columnVal.search(/:-\]|:\)|Happy|JOY|:D/g);
        break;
      case 'sad':
        found = columnVal.search(/:\(|Sad|:'\(/g);
        break;
      case 'angry':
        found = columnVal.search(/!!!|Arr\.\.\./g);
        break;
      case 'lucky':
        found = columnVal.search(/777|Bingo/g);
        break;
      case 'january':
        found = columnVal.search(/01|Jan/g);
        break;
      default:
        found = 1;
        break;
    }

    if (found !== -1) {
      return true;
    }
    return false;
  }

  let oTableDOM = $('#example').DataTable({
    stateSave: true
  });

  yadcf.init(oTableDOM, [{
    column_number: 0,
    filter_type: 'custom_func',
    custom_func: myCustomFilterFunction,
    data: [{
      value: 'happy',
      label: 'Happy'
    }, {
      value: 'sad',
      label: 'Sad'
    }, {
      value: 'angry',
      label: 'Angry'
    }, {
      value: 'lucky',
      label: 'Lucky'
    }, {
      value: 'january',
      label: 'January'
    }],
    filter_default_label: "Custom func filter"
  }, {
    column_number: 1,
    filter_type: "range_number_slider"
  }, {
    column_number: 2,
    filter_type: "date",
    date_format: "dd/mm/yyyy",
    filter_container_id: "external_filter_container"
  }, {
    column_number: 3,
    filter_type: "auto_complete",
    text_data_delimiter: ","
  }, {
    column_number: 4,
    column_data_type: "html",
    html_data_type: "text",
    filter_default_label: "Select tag"
  }]);

    

Ajax data source arrays

Name	Position	Office	Extn.	Start date	Salary
Name	Position	Office	Extn.	Start date	Salary

Code sample for the above example

      let ajax_sourceTable = new DataTable('#ajax_table', {
        ajax: {
          url: 'public/ajax_table_source.txt',
          dataSrc: function (json) {
            json?.data.forEach(row => {
              row[4] = getRandomDate();
            });
            return json.data;
          }
        }
      });
    
      yadcf.init(ajax_sourceTable, [{
        column_number: 0
      }, {
        column_number: 1,
      }, {
        column_number: 2,
      }, {
        column_number: 3,
        filter_type: "range_number"
      }, {
        column_number: 4,
        filter_type: "range_date",
        date_format: "dd/mm/yyyy"
      }, {
        column_number: 5,
        filter_type: "range_number_slider",
        ignore_char: "\\,|\\$"
      }], 'footer');
    

Ajax data source (objects)

Rendering engine	Browser	Platform(s)	Engine version	CSS grade

Code sample for the above example

      let ajax_sourceObjectsTable = $('#ajax_deep_table').DataTable({
        stateSave: true,
        responsive: true,
        ajax: "public/ajax_table_objects_source.txt",
        columns: [{
          "data": "engine"
        }, {
          "data": "browser"
        }, {
          "data": "platform.inner"
        }, {
          "data": "platform.details.0"
        }, {
          "data": "platform.details.1"
        }]
      });
    
      yadcf.init(ajax_sourceObjectsTable, [{
        column_number: 0
      }, {
        column_number: 1,
        filter_type: "text",
        exclude: true,
        exclude_label: '!(not)'
      }, {
        column_number: 2,
        filter_type: "auto_complete"
      }, {
        column_number: 3,
        filter_type: "range_number",
        ignore_char: "-"
      }, {
        column_number: 4
      }]);