Improved List View

[rgstephens]

Has there been any discussion about an improved list view with pagination, sorting, filtering, etc?

I've been adding the React grid component Griddle to most of my projects built with Base to add these features. I'm starting a new project with latest Base (thanks for all the great improvement in the past few releases) and Griddle is one of the first components I add. I haven't surveyed other options for this functionality in the past few months so maybe there's sometime better.

I install:

meteor npm install griddle-react --save

[themeteorchef]

Hi @rgstephens. Not specifically. The goal of Base is to avoid making the bare minimum number of decisions so you can take it wherever you need to. When it comes to features like this, it's best to merge them with a fork of Base.

That said, I'd like to start showcasing forks of Base that include interesting features. Could you send me an email (or share your address here so I can contact you) so we can chat about this? Really appreciate you putting all of this time into PR's/feature ideas!

[rgstephens]

I just sent you an email.

[thearabbit]

+1 for Griddle example.

[rgstephens]

@thearabbit I posted a fork of the main project with a Griddle based List View with pagination, sorting, filtering and action buttons here. @rglover may be posting this and a couple of other example extensions to base soon.

[thearabbit]

Why you don't PR?

[rgstephens]

I did that in #219. Please note the comment above by @themeteorchef regarding why that PR was rejected.

[themeteorchef]

@rgstephens @thearabbit on my list to get this on the site, just a bit backed up at the moment :)

[thearabbit]

1- If I have more then 1,000,000 docs in Documents Collection. Have problem or not, when we pub all of document to Griddle?

Meteor.publish('documents.list', () => Documents.find());
-----
<Griddle
            results={documents}
            ......
------
const composer = (params, onData) => {
  const subscription = Meteor.subscribe('documents.list');
  if (subscription.ready()) {
    const documents = Documents.find().fetch();
    onData(null, { documents });
  }
};

export default composeWithTracker(composer, Loading)(DocumentsList);

2- Could you example to use query/selector to get some data from Documents like Tabular

{{> tabular table=TabularTables.Books selector=selector......

Template.myTemplate.helpers({
  selector() {
    return {author: "Agatha Christie"}; // this could be pulled from a Session var or something that is reactive
  }
});

[themeteorchef]

@thearabbit yes, this will likely cause an issue. You'll want to add some sort of pagination feature to break up the documents into easier to handle chunks.

[thearabbit]

I don't understand about this. Could example for me? Thanks again.

[zhanbst]

@thearabbit yes its problem with performance at loading! @rgstephens Maybe implement pagination, sorting with (pub/sub)?