Nightly Pocket Measurement

    vue-fantastic-table

    0.6.2 • Public • Published

    Vue Fantastic Table

    A great vue table with material design and all the power of jquery datatables features.

    Install

    npm i vue-fantastic-table

    Usage

    import VueFantasticTable from "vue-fantastic-table"
    
    Vue.component("vue-fantastic-table", VueFantasticTable)

    Features


    Responsive mode

    Similar to the responsive mode of jquery datatables. When the screen is small VFT hide columns but when is large VFT show columns.

    To use it just add the prop "responsive".

    <vue-fantastic-table responsive :headers="headers" :rows="rows" />
    

    Server mode

    The rows prop has 2 modes. You can pass an array or a function. If you pass a function VFT will take that as a promise that return an array of objects.

     <vue-fantastic-table :headers="headers" :rows="callRequest" />
     ...
     callRequest: function () {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve(this.rows);
            }, 1100);
          });
        },
    

    While the data is being loaded VFT will show a default message "loading..." You can customize this message with the slot "loading".

    <vue-fantastic-table responsive :headers="headers" :rows="callRequest">
          <template #loading>
            <div>Your custom component or message</div>
          </template>
        </vue-fantastic-table>
    

    Dark Theme

    You can use a dark theme of VFT using the prop "dark":

    <vue-fantastic-table dark responsive :headers="headers" :rows="callRequest" />
    

    Custom slots

    You can change the content that is displayed for each cell in the body. Only need to use slots with the name of the field that you set in headers prop.

    Example:

    <vue-fantastic-table
          :headers="headers"
          :rows="callRequest"
          class="dark"
          responsive
        >
          <template #university="{ name, university }">
            <div>{{ name + " studies in " + university }}</div>
          </template>
    </vue-fantastic-table>
    ...
    headers: [
          { field: "name", label: "Name" },
          { field: "age", label: "Age" },
          { field: "sex", label: "Sex" },
          { field: "district", label: "District" },
          { field: "university", label: "University" },
          { field: "carrer", label: "Carrer" },
          { field: "job", label: "Job" },
          { field: "experience", label: "Experience" },
          { field: "investor", label: "Investor" },
        ],
    rows: [
          {
            name: "Renatto",
            age: 26,
            sex: "M",
            district: "La Perla",
            university: "UNFV",
            carrer: "Ing. Informatica",
            job: "Software Developer",
            experience: 2,
            investor: "Yes",
          },
        ],
    ...
    

    Search

    You can add the prop "search". That will add a search input at the top of VFT.

    <vue-fantastic-table
          :headers="headers"
          :rows="callRequest"
          dark
          responsive
          search
        />
    

    Header and Footer Search

    You can add search inputs for each header and for each footer. Only need to add these props "headerSearch" and "footerSearch".

    <vue-fantastic-table
        :headers="headers"
        :rows="callRequest"
        dark
        footerSearch
        headerSearch
    />
    

    Alt text

    Install

    npm i vue-fantastic-table

    DownloadsWeekly Downloads

    19

    Version

    0.6.2

    License

    MIT

    Unpacked Size

    66.1 kB

    Total Files

    6

    Last publish

    Collaborators

    • rodkin