Reply To: columns with button

[yavordashew]

Hi dusrkdldlr,
If you want to add a button to a column you can do so by using the ‘template’ property of the columns array.
For example in your Vue file:

setup() {
    onMounted(() => {
      window.Smart(
        "#grid",
        class {
          get properties() {
            return {
              dataSource: new window.Smart.DataAdapter({
                dataSource: [YOUR DATA SOURCE] ,
              sorting: {
                enabled: true
              },
              behavior: {
                columnResizeMode: "split"
              },
              layout: {
                rowHeight: 50
              },
              selection: {
                enabled: true,
                mode: "extended",
                allowCellSelection: true
              },
              editing: {
                enabled: true,
                mode: 'row',
              },
             columns: [
                {
                  label: "Name",
                  dataField: "name",
                  freeze: true,
                  allowResize: true
                },
                 {
                  label: "Due date",
                  editor: "dateInput",
                  width: 200,
                  dataField: "dueDate",
                  cellsFormat: "d",
                  allowResize: true,
                  template: '<button onclick="Your Function()"> Click me</button>'/**The template of the column*////
                }],
//Rest of your code 

Or check the demos regarding templates:
https://www.htmlelements.com/vue/demos/grid/column-template/
https://www.htmlelements.com/vue/demos/grid/column-dynamic-template/
https://www.htmlelements.com/vue/demos/grid/column-dynamic-template-with-components/
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/