jiahengaa / beegridtable Goto Github PK

Hello posible add height row no fixed colum for fixed column example

1. How can I separate the column header and cell align?
2. Is it possible to do the paging process on the server side?

Thank you.

I am using vue.js without node and currently using version 1.1.2 from GitHub releases.
Could you do a release of the current version here as well?

Hi, I would like to override the select input, or capture the event when click on one.

http://beegridtable.com/selection

I can only select all or clear all.

  handleSelectAll(status) {
     this.$refs.selection.selectAll(status);
  },

I need to select one by one, while doing a click

Saludos from 🇨🇱

1. Install

npm i beegridtable

2. Create plugin plugins/bee-grid-table.ts with content:

import Vue from "vue";
import BeeGridTable from "beegridtable";

import 'beegridtable/dist/styles/beegridtable.css';
//@ts-ignore
import BeeLocale from "beegridtable/src/locale"

Vue.use(BeeGridTable, {
  locale: BeeLocale,
  capture: true,
});

3. In nuxt.config.js register plugin:

  plugins: [
    {src: '~/plugins/bee-grid-table', ssr: false}
  ],

You can't omit {ssr:false} option and use

  plugins: [
    '~/plugins/bee-grid-table'
  ],

because of you will see error:

Cannot use import statement outside a module

https://stackoverflow.com/questions/64132293/cannot-use-import-statement-outside-a-module-using-nuxtjs

4. In your component use it:

<template>
  <div>
    <client-only placeholder="Loading...">
      <BeeGridTable :columns="columns" :data="rows"/>
    </client-only>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'index',
  computed: {
    columns() {
      return [
        {
          title: "Name",
          key: "name",
          align: "center",
        }
      ]
    },
    rows() {
      return [{name: 'A'}, {name: 'B'}]
    }
  }
})
</script>

Hi some bug if use safari or midori(analog safari for linux)
header not have current height

Hi! In your Overview example you have a default ascending sorting for the (arrow down is on building column)
To expect is that it would go down from A999...A998 etc. But the row is Ascending from A1...A2 etc..
I reproduced it by following code for a column
{
title: "updatedAt",
key: "updatedAt",
type: "date",
dateType: "datetime",
format: "dd-MM-yyyy HH:mm",
align: "center",
resizable: "true",
sortable: "true",
sortType: "desc"
}

Would be great to enable default sorting if sortType is set!
Great work by the way :)

Hello, how can I connect pagination section with my API, for example:

I have my endpoint with attributes of pagination:

data: [{id: 9, name: null, total: "200550.0", neto: null, taxes_id: null, type_movement: "",…},…]
per_page: 25
total_items: 765
total_pages: 31 

The attribute data only returns array with 25 results, which is what I send as attribute data :data="data".

<BeeGridTable
      border
      height="560"
      :showFilter="false"
      :showSummary="false"
      :columns="columns"
      :data="data"
      ....

It should show 765 results instead of 25 :(

Total 25 items , the filter result 25 items

¿How can I overwrite the method so that every time I change the page, I make a call to my API?

Hello I was checking the translations at the time of implementing the table, and attributes are missing for example in es-ES

https://github.com/jiahengaa/BeeGridTable/blob/main/src/locale/lang/es-ES.js#L17

missing attributes:

filterContain: "Contiene",
filterNotContain: "No contienee",
filterStartWith: "Empezar con",
filterEndWith: "Terminar con",
filterResultL: ", el resultado del filtro",
filterResultR: " items"

or I'll send you a pull request?

When component list imports BeeGridTable, everything works fine.
Now, component list-stories (in separate repository), wants to use component list (that uses BeeGridTable), then I see the error:

Code for component list:

<template>
  <div @click='onClickRowHandler'>
    <BeeGridTable
      :columns='columnsData'
      :data='data'
      :showFilter='false'
      :showPager="showPagination"
      
      border
      highlight-row
      ref='selection'
    ></BeeGridTable>
  </div>
</template>

<script>
import Vue from "vue";
import BeeGridTable from "beegridtable";
import BeeLocale from "beegridtable/src/locale";
import "beegridtable/dist/styles/beegridtable.css";

import defaultProperties from "./defaultProperties";

Vue.use(BeeGridTable, {
  locale: BeeLocale,
  capture: true,
});

export default {
  name: 'list',
  components: {
    BeeGridTable, // Commenting out this line stops the above error, but still not usable in list-stories.
  },
  data(): {...},
  props: {...},
  computed: {...},
  methods: {...},
  mounted() {}
}
</script>

In src/main.js, (for repo of list component), I simply do:

import listComponent from './components/list/list.vue';
export default listComponent;

Code for component list-stories:

<template>
  <div>
    <list :rows='activeList'/>
  </div>
</template>
<script>
import list from 'list-component';
export default {
  name: "HelloWorld",
  props: {
    activeList: []
  },
  components: { list }
};
</script>

In src/main.js, (for repo of list-stories):

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

Any advice on how to fix the bug.
Essentially, I am trying to figure out how to import BeeGridTable and export the wrapper component such that BeeGridTable is usable by caller component without explicitly importing BeeGridTable.

Hello, I need to sort the attributes of a column, I am sending the property sortable = "true", but I don't know if it is the correct way, because I have errors in my console.

Example code:

 <BeeColumn field="email" title="Correo electrónico" type="text" sortable="true">
          <template slot-scope="{ row }">
            {{row.email}}
          </template>
 </BeeColumn>

Error:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop "sortable". Expected Object, got String with value "true".

found in

---> <TableColumn>
       <BeeGridTable>
         <Representative> at src/views/private/components/index.vue
           <Private> at src/views/private/application.vue
             <App> at src/App.vue
               <Root>

Hi. I have about 40 columns in table and i don't see full content in the cell. How can i set cell width equal inner content in this cell? Or set column width by max width cell in this column? On screenshot first column must be about 240-250px, second and third column about 200px. And this columns fixed. Count fixed columns loaded dynamics and whey width maybe different

example

Hello, I am building a tree structure and I wanted to know if this option exists?

That allows to hide and group the children.

Example

If you have multi page docs, you can add searcher like

https://www.algolia.com/

to make searching in docs easier.

i was not able to find the solution to add CSS to the header of the table.

Styling
There is a slight styling bug where the border for the fixed columns overlaps the horizontal scroll bar (as in in image)

Pagination
The pagination is currently displaying 4 4 where I imagine it should say 4/4

Fixed columns
When creating a fixed column inside of a header group. The header just doesn't render in.

  {
    title: 'testGroup',
    children: [
      {
        title: 'test',
        key: 'test',
        width: 180,
        fixed: 'left',
        resizable: true,
        sortable: true
      }
    ]
  },

Hi there!

I built a table with a select filter header and also select boxes in its column data.
Following problem occurs:
When I select a value in the header, the column is not filtered by that values. I can't filter for these select box values in your example aswell provided in http://www.beegridtable.com/custom-filter

Screenshots:

Here is the snipped i use for my table:
<template slot="hreviewState" slot-scope="{ column, doSortAndFilter }" > <Select v-model="column.selectedReviewState" transfer clearable style="width: 150px" @on-change="filterStateSelectChange(column, doSortAndFilter)" > <Option v-for="item in reviewStates" :key="item" :value="item" > {{ item }} </Option> </Select> </template> <!-- reviewState row template --> <template slot="reviewState" slot-scope="{ row }" > <Select v-model="row.reviewState" style="width: 140px" @on-change="changeReviewState(row, $event)" > <Option v-for="item in reviewStates" :key="item" :value="item" > {{ item }} </Option> </Select> </template>

Click 3 times on sort icon -> chack console: Cannot read property 'filterOperation' of undefined. Reproduce here: http://www.beegridtable.com/sort

Hi!
Please, can you make this component compatible with Vue 3?
Thank you!

The table could do with a mobile friendly view as it currently doesn't work the best on smaller devices