https://github.com/jomendez/resizable-angular-material-grid
Resizable angular material grid
https://github.com/jomendez/resizable-angular-material-grid
Last synced: 8 months ago
JSON representation
Resizable angular material grid
- Host: GitHub
- URL: https://github.com/jomendez/resizable-angular-material-grid
- Owner: jomendez
- Created: 2019-09-03T20:40:30.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T09:20:51.000Z (almost 3 years ago)
- Last Synced: 2025-01-02T05:17:41.975Z (9 months ago)
- Language: TypeScript
- Size: 1.89 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular material resizable grid component (with example)
You can find the component: `src/app/grid`
Example of how to use the component: `src/app/resizable-table`
## Clone and install dependencies
```bash
git clone https://github.com/jomendez/resizable-angular-material-grid
cd resizable-angular-material-grid
npm install
```
## @Inputs
- `[dataSource]` Object of type MatTableDataSource with the data
- `[columns]` object with the column definition
- `[cellTemplateRef]` html reference to the cell definition template
- `[addRemoveColumn]` boolean to specify if show add/remove functionality (default true)
- `[resizable]` boolean to specify if make the columns resizable (default true)
- `[infiniteScroll]` boolean to specify if the pagination is going to be infinite scroll (default false)
- `[totalPages]` number that specify the total number of pages
## @outputs
- `(nextPage)` call a function with the code that load the next page
- `(rowClick)` call a function when a row is clicked and pas the row object as parameter in the $event object
## Css variables:
- `--background-color-even` Define the color of the even rows
- `--background-color-odd` Define the color of the odd rows
- `--background-color-header` Define the color of the header rows
### Example:
```css
app-grid {
--background-color-even: #070ada;
--background-color-odd: rgb(38, 236, 12);
--background-color-header: #f80808;
}
```
Notes:
Cell template reference `ng-template(#columnTemplateRef, let-row=row, let-column=column)`
`let-row=row` Defines a variable `row` that can be used as angular variable in the child components (the same for `column`)