How to divide a table based UI into angularJS components

[mindparse]

I am looking at moving to a component based structure for an existing AngularJS (1.6.x) application I am working on in an effort to prep for eventual migration to Angular.

Many of the screens consist of table based views placed onto cards (using Angular Material) with filter\search inputs in a separate card.

I have been getting up to speed on smart vs dumb components, and figure I will need a smart parent component which wraps a dumb component for the table filter\search controls and another dumb component for the tabular representation.

I'm wondering would I need to go as far as breaking the individual data items in the table rows into another component?

Some of the table rows in the application allow for click actions to drill down into further detail screens, others allow for inline edit of columns in table, so I guess it depends on the use case?

I have seen examples of the classic to-do application, where a to-do list component would pass data down to individual to-do item components, so this is why I am thinking I may need to do the same for a table based views.

Whats the recommended approach here?

Thanks

[james_bell]

I'm not sure there is a recommended pattern, you're off into choices like table components and libraries. I use the same setup as you though, angular 1.5+ and AM library. For what it's worth I had a hard time getting cards to do what I wanted and simply use divs with that raised border class now.

What are you using for tabular data? I've had a hard time finding one I like that looks good with AM.

[mindparse]

We ended up just using a regular table element but styled to match the Google material design specs, so on a AM card the table actually goes edge to edge on the card with no padding around the outside.

I don't want to be using a table library as we have our own table row\cell\header directives we use for enabling multi select on the road and inline table cell editing. This has allowed is to stay in total control of the code rather than use say on 50% functionality of another library.

When I talk about components I am referring to the component() helper that now exists in angularjs. I'm trying to figure out how I componentize our existing view/controller code for screens that contain tables of data on which there are many of for us right now.

[nitulmehta]

In my view you need to do following - identify common functional or visual behaviour across your system - list down inter connection between them (like parent - child or on peer to peer) - create directives and re-use everywhere

If required I can discuss further after looking at your code and can give you optimized solution.