MicroDroid / vue-materialize-datatable

A fancy Materialize CSS datatable VueJS component.
https://overcoder.dev/vue-materialize-datatable
MIT License
179 stars 67 forks source link

Date filter in column function call #60

Closed dwhudson closed 3 years ago

dwhudson commented 3 years ago

This datatable component is da bomb. I'm attempting to work through getting a couple of features to work. Specifically I'm passing in a json object via a return statement from computed method to :rows. It's showing my data properly. My struggle is with the date column. On my original grid below the datatable you can see how it takes my date value and coverts the output. My filter is is basically: formatDate(val) and returns the value in the output I want.

field: "name", // Field name from row // Use dot for nested props // Can be function with row as 1st param

In my tables columns definition I'm trying to implement it as follows: { label: "Updated", field: "function(row => {row.updatedOn | formatDate })", //this.formatDate(updatedOn), numeric: true, html: false, },

Anyone have any thoughts on how I can implement my formatDate function to work with the datatable? Thanks in advance for any help

tables_pic

MicroDroid commented 3 years ago

Format the data before passing down to the component

dwhudson commented 3 years ago

I was able to get it. Might be worth adding this to the demo page. Totally could have filtered it before hand. New to Vue didn't realize scope="props" use in the code.

`<datatable
      title="Testing Locations"
      :columns="tableColumns1"
      :rows="userSitesFilter"
    >
      <th slot="thead-tr">Updated</th>
      <th slot="thead-tr">Actions</th>
      <template slot="tbody-tr" scope="props">
        <td>{{ props.row.updatedOn | formatDate }}</td>
        <td>
          <button
            @click="(e) => $refs.modalName.openModal(props.row, e)"
            class="waves-effect waves-light btn blue darken-4"
          >
            View/Edit
          </button>
        </td>
      </template>
    </datatable>`