2
votes

I'm developing a vue-based system, and for my tables, I'm using this: https://github.com/matfish2/vue-tables-2

The component has lots of options. There's the possibility to define custom cell templates to manipulate data before showing them, like this one for the "created_at" column:

 templates: {
                created_at(h, row) {                   
                  return this.formatDate(row.created_at);
                },    
              //(...)                      
            }

I can add other templates as well:

var user_id = function(h,row){return row.id};
...

templates: {
                created_at(h, row) {                   
                  return this.formatDate(row.created_at);
                },    
              user_id,                  
              (...) // etc

            }

But I'd like to group the functions into a variable, so I could reuse the code, like:

 var custom_template = [
        { user_id(h,row){return row.id} },
        { user_name(h,row){return row.name} },
        { created_at(h, row){return this.formatDate(row.created_at)} }                 
    ];

 templates: {                
            custom_templates                                                    
        }

EDIT 1: So i could have something like:

templates: {                
          user_id(h,row){return row.id} ,
          user_name(h,row){return row.name} ,
          created_at(h, row){return this.formatDate(row.created_at)}                                                    
        }

It's not working, but is it possible? Do I need extra code to achieve this? Thanks! =)

2
Is there a reason why you'd want to use an array of functions, when the template option only accepts objects? Technically you can create a "base" class of templates (an object containing functions), and use Object.assign(...) to add additional templates, if required, to the template option.Terry

2 Answers

3
votes

var custom_template = [
  function user_id(h, row) {
    return row.id;
  },
  function user_name(h, row) {
    return row.name;
  },
  function created_at(h, row) {
    return row.created_at;
  }
];

custom_template.forEach(
  item => console.log(item(1, {
    id: 1,
    name: "test",
    created_at: new Date()
  })));
1
votes

You need to combine Igor's solution to create array of functions with some form of expanding the array, such as the spread syntax