How to integrate custom components?

[jonicious]

Hey,

really like this solution, especially because it is fully integrated into the Redux state. Also like your approach for selectors for the parent component to e.g. get all selected rows. The following is not really an issue with the project, more like a question. Not sure if it's the best place to ask them. Excuse me if it is not.

In my project, I already have many custom components that basically look pretty similar to TableRow, Table, SelectRow and Pagination. Also, I am having reducers that handle all the pagination actions but the code grew and grew and needs some refactoring. sematable does have the exact functionality I need and could replace my current reducers. Therefore, I would like to refactor my table components to use sematable.

While playing around a little with sematable, I noticed it relies heavily on the given components and you really can just set the TableComponent as second param when "initiating" sematable. You can just set showPageSize and showFilter to false. Sadly, there is no option to hide the pagination.

So.. what is the best option to just use the Redux part of sematable and integrate custom components?

Thanks in advance for your help!

[amir-hadzic]

Hi @jonicious, this is a great question. My intention for sematable was that it would be primarily a set of redux selectors, actions, and reducers, without making too many assumptions on how the UI will actually look like.

Unfortunately at the moment there's no way to do what you are asking. It wouldn't be too much work to add this as an option to sematable or provide some makeSematable function that would only connect mapStateToProps and mapDispatchToProps to some custom component.

I'll try to come up with something.

[jonicious]

That's great to hear! Happy to collaborate :) Let me know if there is something I can help with.

[jonicious]

I looked into the code to get a better understanding how things work. My goal is to have custom components but be able use sematable's actions, selectors and reducers. I assume that we don't want to introduce breaking changes for the lib?

provide some makeSematable function that would only connect mapStateToProps and mapDispatchToProps to some custom component.

This sounds like a good idea but I have a question. In sematable.js, many things are happening in componentWillMount() and componentWillReceiveProps(nextProps). Some minor things in render(). If we provide a makeSematable function, users that would like to create their own wrapper to use custom components would need to copy those parts, right?

It wouldn't be too much work to add this as an option to sematable

Currently, there are the following function arguments: tableName, TableComponent, columns, configs. If we provide a way to integrate custom components, only tableName would be relevant, right? Would you use the configs object for that option or how would you do it?

The last option I can image is to extract all the markup in render() in sematable.js to an extra component, call it something like DefaultLayout. If an option is set when creating a sematable that you want to use your own markup, your own markup is used instead. The problem with that is that we are passing in the tableComponent as second argument in sematable function which would be unnecessary if we have our own wrapper with custom components like a SearchBar, Pagination etc.

Would love to hear your feedback, because I would love to use sematable in a refactoring in one of my projects. What is the best and most appropriate way to implement this feature? Thanks!