jiahengaa / beegridtable Goto Github PK

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

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?

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

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.

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 🇨🇱

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

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

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?

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!
Please, can you make this component compatible with Vue 3?
Thank you!

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.

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

https://www.algolia.com/

to make searching in docs easier.

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>

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! 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 :)

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

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

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?