问题
I'm a newbie to angular, Looking forward to create a table which will render large amount of data. Below are the features in the table I'm trying to achieve. Can someone guide how to approach this? Is there any open source project which implemented it? Or good resources
Generic Search button to search in all columns and display results in table
User can show and hide certain columns
Pre populated filtering dropdown on selective columns. Can select multiple options in one column (like in google spreadsheet)
Sorting on selective/all columns (sort by single field at a time)
Pagination with option to choose number of results in one page
Edit and delete action on each row
Expandable row to show more metadata
Thanks!
回答1:
Since I've found about the Angular2 Template of ng2-admin (http://akveo.com/ng2-admin/#/pages/dashboard), I've been using their table which is from another repo called ng2-smart-table (https://github.com/akveo/ng2-smart-table).
I find this to be quite efficient, even though it requires a bit of work to be truly practical.
I've been putting this table in a semi big-data context and I have achieved a good responsive time overall with only a few issues, so there is really no issue with a lot of data if you do things correctly.
- Filter and general search : There is already a working example in the demo : https://akveo.github.io/ng2-smart-table/#/examples/using-filters.
- User hide / show columns : It requires some coding, but is very easy to realize.
- Dropdown filters and options : Available as an example on the same link (https://akveo.github.io/ng2-smart-table/#/examples/using-filters, on the bottom part about "Checkbox, Select and Completer filter types").
- Sorting : Available and customisable. (https://akveo.github.io/ng2-smart-table/#/documentation)
- Pagination : Available and customisable. (https://akveo.github.io/ng2-smart-table/#/documentation)
- Actions on rows : Available and easily customisable with angular components (https://akveo.github.io/ng2-smart-table/#/examples/custom-editors-viewers).
- Expandable rows : I have not done it personnaly, but I know it's doable since I saw other people do it with this table. From what I recall, it's done using another smart-table for each detail-row, but that's just hypothetical.
I'd recommend this one, because it's very raw (and the documentation is not perfect), which means easily customizable to suit your needs. I've been using this library for nearly a year now, and I have several kind of generic smart-table components which are very easy to set and use.
N.B: If you really are new to Angular, be careful to really understand correctly the concepts and how to do things, because managing a table is one of the hardest jobs you can do since it's very easy to create something not really functionnal nor efficient, especially if you handle a large set of data.
回答2:
If you're looking for a component that does most, if not all, of the things you mention then it's definitely worth checking out ag-grid - though some features, e.g. master / detail, are enterprise license only:
https://www.ag-grid.com/example.php
回答3:
If you can give a little time to this you can achieve almost all of your requirements. This component is highly customizable. Features include
- Handle large data sets ( Virtual DOM )
- Expressive Header and Cell Templates
- Horizontal & Vertical Scrolling
- Column Reordering & Resizing
- Client/Server side Pagination & Sorting
- Intelligent Column Width Algorithms ( Force-fill & Flex-grow )
- Integrated Pager
- Cell & Row Selection ( Single, Multi, Keyboard, Checkbox )
- Fixed AND Fluid height
- Left and Right Column Pinning
- Row Detail View
- Decoupled theme'ing with included Google Material theme
- Light codebase / No external dependencies
- AoT Compilation Support
- Universal Support
This is also similar to your requirements which you can start using directly if you don't have time to customize.
来源：https://stackoverflow.com/questions/48063714/table-design-to-render-large-amount-of-data-angular