gridjs icon indicating copy to clipboard operation
gridjs copied to clipboard

Please allow a boolean, "loading", in constructor & updateGrid

Open kerryboyko opened this issue 3 years ago • 0 comments

I'm working on creating a Vue3-compatible component with GridJS (GridJS-Vue doesn't work with Vue 3 & Vite). One thing I would DEARLY like to do is to be able to control whether or not the grid shows the (wonderfully designed) loading screen from outside of the component.

Right now, the component will show loading if you pass in a function returning a promise to the data attribute. However, what I'd like to do is control the status directly - that is, I'd like to have my application make the ajax call and resolve it (for various purposes, such as error handling, data parsing, etc) and simply run something like:


const grid = useGrid(gridRef);
const updateData = async(){
  grid.updateGrid({loading: true});
  try {
    const {headers, data} = ajax();
    grid.updateGrid({headers, data, loading: false});
  } catch (err){
    grid.updateGrid({loading: false});
    console.error(err);
  }
}

The only other way that I can figure this out might be to do some very convoluted stuff with NASTY side-effects, something like...


const grid = useGrid(gridRef);
const getData = async(){
try {
    const {headers, data} = ajax();
    return {headers, data};
  } catch (err){
    console.error(err);
  }
}

const updateData = async(){
  grid.updateGrid({data: () => getData.then(({headers, data}) => {
    grid.updateGrid({headers}) // nasty side effect!!!
    return data;
)))
 

Additional context Add any other context or screenshots about the feature request here.

kerryboyko avatar Aug 03 '21 16:08 kerryboyko