13 |
15 | 4 | An example on how to confirm an action before it's applied to the table: 5 |
6 |An example on how to use multi select mode:
14 |4 | This example shows how to pass the data loaded from some API to the table DataSource. 5 |
6 |13 | An example on how to load data user Server DataSource: 14 |
15 |Yes, ng2-smart-table is absolutely free and MIT licensed. That basically means you can use it as you want to.
24 | 25 |If you have a second:
28 |Yes! We are available for hire. Visit our homepage or simply leave us a note at contact@akveo.com. We will be happy to work with you!
38 | 39 |4 | An example on how to use select, completer, textarea column types: 5 |
6 |An example on how to use a custom cell editor and/or custom cell renderer:
12 |When implementing a custom editor or renderer remember to add it to the entryComponents and to the declarations part of your module
18 | {{ snippets.customEditorModule }}
19 |
20 |
21 | For the custom cell editor:
22 | To inherit the methods needed to interact with the table you can either extend the component with the DefaultEditor class or implement the Editor interface and reproduce the same methods on your component.
23 | For the custom cell renderer:
24 | In this example the custom component is applying a .toUpperCase() to one of the columns. You can implement the ViewCell interface to make sure you are setting up your component correctly.
25 |
An example on how to use custom button view:
33 |An example on how to use custom actions:
41 |6 | Hello and Welcome! 7 |
8 | 9 |11 | The library is available as npm package, so all you need to do is to run the following command: 12 |
13 |
14 | {{ snippets.install }}
15 |
16 | This command will create a record in your `package.json` file and install the package into the npm modules folder.
17 | 18 |21 | First thing you need to do is to import the ng2-smart-table directives into your component. 22 |
23 |
24 | {{ snippets.require }}
25 |
26 | 27 | Then register it by adding to the list of directives of your module: 28 |
29 |
30 | {{ snippets.directive }}
31 |
32 |
33 | Now, we need to configure the table and add it into the template. The only required setting for the component to start working is a columns configuration.
34 | Let's register settings property inside of the component where we want to have the table and configure some columns (Settings documentation):
35 |
37 | {{ snippets.settings }}
38 |
39 | 40 | Finally let's put the ng2-smart-table component inside of the template: 41 |
42 |
43 | {{ snippets.template }}
44 |
45 | 46 | At this step you will have a minimally configured table which should look something like this: 47 |
48 |52 | All functions are available by default and you don't need to configure them somehow, so you already able to add/edit/delete rows, sort or filter the table, etc. 53 |
54 |55 | But it feels like something is missing... Right, there is no data in the table by default. To add some, let's create an array property with a list of objects in the component. Please note that object keys are same as in the columns configuration. 56 |
57 |
58 | {{ snippets.array }}
59 |
60 | And pass the data to the table:
61 |
62 | {{ snippets.dataTemplate }}
63 |
64 | Now you have some data in the table:
65 |69 | That's it for a minimal setup, our final component should look like this, pretty simple, huh? 70 |
71 |
72 | Demo Source
73 | {{ snippets.basicFull }}
74 |
75 |
76 | Full component documentation you can find here.
77 |
4 | Say you don't need to have a filter field in the each table column or the requirements says that search field should be placed outside of the table?
5 | Fortunately this is super easy to achieve, to do this we need to slightly modify our basic component example.
6 |
9 | First thing you need to know is that all the data operations against the table must be done using the DataSource table property. DataSource is an abstraction around your data which allows you easily modify the table data or subscribe to events to modify the table behaviour. 10 |
11 |12 | To access the DataSource we either can take it from the table or pass it instead of our data array. Let's do the second option as it requires less code and is more demonstrative. Let's import the DataSource class by modifying the import statement: 13 |
14 |
15 | {{ snippets.sourceRequire }}
16 |
17 |
18 | Note that the import now contains a LocalDataSource class (the word Local here means that the data is processed locally in a browser, not on the server side).
19 | Then let's create a DataSource instance and pass our data array into it as a constructor parameter:
20 |
22 | {{ snippets.createSource }}
23 |
24 | 25 | Now let's pass the source to the table instead of the data array: 26 |
27 |
28 | {{ snippets.sourceTemplate }}
29 |
30 |
31 | At this point if you look at the result there will be no difference comparing to the first example. Basically if you pass an array to the table component first thing it will do is wrap LocalDataSource object around your array as we did here manually.
32 | Now, having the DataSource we basically could change the table data in any way we need to - filter it, sort, paginate to some page, create/delete/modify the rows. In our example we need to be able to filter the data outside of the table, firstly let's add a search filed to the template with a listener:
33 |
35 | {{ snippets.search }}
36 |
37 | 38 | And the listener code which asks the DataSource to filter the data: 39 |
40 |
41 | {{ snippets.searchTable }}
42 |
43 | 44 | Last thing, let's hide the default table filters to not conflict with our standalone one: 45 |
46 |
47 | {{ snippets.hideFilters }}
48 |
49 | 50 | And done! Now the table has a standalone search field: 51 |
52 |56 | Same way you can modify the data of the table, for example by adding a row from a third party form or listening to some external event. 57 | Here's a full component code: 58 |
59 |
60 | Demo Source
61 | {{ snippets.sourceFull }}
62 |
63 |
64 | 66 | An example on how to use the built-in column filter types: 67 |
68 |