How to use frappe-datatable - 8 common examples

setup_datatable(values) {
		this.$datatable_wrapper.empty();
		this.datatable = new DataTable(this.$datatable_wrapper[0], {
			columns: this.columns,
			data: this.get_data(values),
			getEditor: this.get_editing_object.bind(this),
			checkboxColumn: true,
			inlineFilters: true,
			cellHeight: 35,
			direction: frappe.utils.is_rtl() ? 'rtl' : 'ltr',
			events: {
				onRemoveColumn: (column) => {
					this.remove_column_from_datatable(column);
				},
				onSwitchColumn: (column1, column2) => {
					this.switch_column(column1, column2);
				},
				onCheckRow: () => {
					const checked_items = this.get_checked_items();

render_datatable() {
		if (this.datatable) {
			this.datatable.destroy();
		}

		this.datatable = new DataTable(this.$table_preview.get(0), {
			data: this.data,
			columns: this.columns,
			layout: this.columns.length < 10 ? 'fluid' : 'fixed',
			cellHeight: 35,
			serialNoColumn: false,
			checkboxColumn: false,
			noDataMessage: __('No Data'),
			disableReorderColumn: true
		});

		let { max_rows_exceeded, max_rows_in_preview } = this.preview_data;
		if (max_rows_exceeded) {
			this.wrapper.find('.table-message').html(`
				<div class="text-muted margin-top text-medium">
				${__('Showing only first {0} rows in preview', [max_rows_in_preview])}
				</div>

data: data,
				inlineFilters: true,
				treeView: this.tree_report,
				layout: 'fixed',
				cellHeight: 33,
				showTotalRow: this.raw_data.add_total_row,
				direction: frappe.utils.is_rtl() ? 'rtl' : 'ltr',
				hooks: {
					columnTotal: frappe.utils.report_column_total
				}
			};

			if (this.report_settings.get_datatable_options) {
				datatable_options = this.report_settings.get_datatable_options(datatable_options);
			}
			this.datatable = new DataTable(this.$report[0], datatable_options);
		}

		if (typeof this.report_settings.initial_depth == "number") {
			this.datatable.rowmanager.setTreeDepth(this.report_settings.initial_depth);
		}
		if (this.report_settings.after_datatable_render) {
			this.report_settings.after_datatable_render(this.datatable);
		}
	}

if (Template.instance().subscriptionsReady() && i18nextReady.get()) {
      const columns = [
        {
          name: i18next.t('globals.date'),
          editable: false,
          compareValue: (cell, keyword) => [moment(cell, 'DD.MM.YYYY').toDate(), moment(keyword, 'DD.MM.YYYY').toDate()],
        },
        { name: i18next.t('globals.resource'), editable: false },
        { name: i18next.t('details.startTime'), editable: false },
        { name: i18next.t('details.breakStartTime'), editable: false },
        { name: i18next.t('details.breakEndTime'), editable: false },
        { name: i18next.t('details.endTime'), editable: false },
        { name: i18next.t('details.totalTime'), editable: false },
        { name: i18next.t('details.regularWorkingTime'), editable: false },
        { name: i18next.t('details.regularWorkingTimeDifference'), editable: false }]
      Template.instance().datatable = new DataTable('#datatable-container', {
        columns,
        serialNoColumn: false,
        clusterize: false,
        layout: 'ratio',
        showTotalRow: true,
        noDataMessage: i18next.t('tabular.sZeroRecords'),
      })
      Template.instance().datatable
        .refresh(Template.instance().workingTimeEntries.get()
          .map((entry) => Object.entries(entry)
            .map((key) => { if (key[1] instanceof Date) { return moment(key[1]).format('DD.MM.YYYY') } return key[1] })), columns)
    }
  })
})

name: i18next.t('globals.date'),
          editable: false,
          width: 1,
          compareValue: (cell, keyword) => [moment(cell, 'DD.MM.YYYY').toDate(), moment(keyword, 'DD.MM.YYYY').toDate()],
        },
        { name: i18next.t('globals.project'), editable: false, width: 2 },
        { name: i18next.t('globals.resource'), editable: false, width: 2 },
        {
          name: Meteor.user() && Meteor.user().profile.timeunit === 'd' ? i18next.t('globals.day_plural') : i18next.t('globals.hour_plural'),
          editable: false,
          width: 1,
          format: (value) => value.toFixed(Meteor.user().profile.precision
            ? Meteor.user().profile.precision : 2),
        },
      ]
      Template.instance().datatable = new DataTable('#datatable-container', {
        columns,
        serialNoColumn: false,
        clusterize: false,
        layout: 'ratio',
        showTotalRow: true,
        noDataMessage: i18next.t('tabular.sZeroRecords'),
      })
      Template.instance().datatable
        .refresh(Template.instance().dailyTimecards.get()
          .map((entry) => Object.entries(entry)
            .map((key) => { if (key[1] instanceof Date) { return moment(key[1]).format('DD.MM.YYYY') } return key[1] })), columns)
    }
  })
})

if (!rows) {
        rows = [];
      }

      if (!columns) {
        columns = this.getColumns();
      }

      for(let column of columns) {
         column.editable = false;
      }

      if (this.datatable) {
        this.datatable.refresh(rows, columns);
      } else {
        this.datatable = new DataTable(this.$refs.datatable, {
          columns: columns,
          data: rows
        });
      }
    },
    getColumns(data) {

Template.instance().autorun(() => {
    if (Template.instance().subscriptionsReady() && i18nextReady.get()) {
      const columns = [
        { name: i18next.t('globals.project'), editable: false },
        { name: i18next.t('globals.resource'), editable: false },
        {
          name: Meteor.user() && Meteor.user().profile.timeunit === 'd' ? i18next.t('globals.day_plural') : i18next.t('globals.hour_plural'),
          editable: false,
          format: (value) => value.toFixed(Meteor.user().profile.precision
            ? Meteor.user().profile.precision : 2),
        },
      ]
      Template.instance().datatable = new DataTable('#datatable-container', {
        columns,
        serialNoColumn: false,
        clusterize: false,
        layout: 'ratio',
        showTotalRow: true,
        noDataMessage: i18next.t('tabular.sZeroRecords'),
      })
      Template.instance().datatable
        .refresh(Template.instance().periodTimecards.get()
          .map((entry) => Object.entries(entry)
            .map((key) => key[1])), columns)
    }
  })
})

mounted() {
    this.datatable = new DataTable(this.$refs.wrapper, {
      columns: this.getColumns(),
      data: this.docs,
      layout: 'fluid',
      checkboxColumn: true,
      checkedRowStatus: false,
      events: {
        onCheckRow: () => {
          this.checkedRows = this.datatable.rowmanager
            .getCheckedRows()
            .map(i => parseInt(i, 10));
        }
      },
      getEditor: (colIndex, rowIndex, value, parent) => {

        let inputComponent = null;
        const docfield = this.datatable.getColumn(colIndex).field;