All Projects → katoid → Angular Grid Layout

katoid / Angular Grid Layout

Licence: mit
Responsive grid with draggable and resizable items for Angular applications.

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Angular Grid Layout

Dragact
a dragger layout system with React style .
Stars: ✭ 710 (+335.58%)
Mutual labels:  grid, drag-and-drop, draggable, grid-layout
Vue Responsive Dash
Responsive, Draggable & Resizable Dashboard (Grid) for Vue
Stars: ✭ 128 (-21.47%)
Mutual labels:  draggable, grid-layout, resizable, responsive
React Awesome Styled Grid
A responsive 8-point grid system layout for React using styled-components
Stars: ✭ 157 (-3.68%)
Mutual labels:  grid, grid-layout, responsive
Magnify
🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+!
Stars: ✭ 177 (+8.59%)
Mutual labels:  draggable, resizable, responsive
tb-grid
tb-grid is a super simple and lightweight 12 column responsive grid system utilizing css grid.
Stars: ✭ 19 (-88.34%)
Mutual labels:  grid, responsive, grid-layout
react-web-editor
The react-web-editor is a WYSIWYG editor library. you can resize and drag your component. It also has simple rich text editor
Stars: ✭ 191 (+17.18%)
Mutual labels:  drag-and-drop, draggable, resizable
Photoviewer
🌀 A JS plugin to view images just like in Windows.
Stars: ✭ 203 (+24.54%)
Mutual labels:  draggable, resizable, responsive
vue-smart-widget
🗃️Smart widget is a flexible and extensible content container component for Vue2.x / Vue3.x in Next branch.
Stars: ✭ 110 (-32.52%)
Mutual labels:  grid, draggable, resizable
Svelte Grid
A responsive, draggable and resizable grid layout, for Svelte.
Stars: ✭ 473 (+190.18%)
Mutual labels:  grid, draggable, resizable
Vue Grid Layout
A draggable and resizable grid layout, for Vue.js.
Stars: ✭ 5,170 (+3071.78%)
Mutual labels:  grid, drag-and-drop, grid-layout
Muuri
Infinite responsive, sortable, filterable and draggable layouts
Stars: ✭ 9,797 (+5910.43%)
Mutual labels:  grid, drag-and-drop, draggable
Flowy Vue
Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.
Stars: ✭ 107 (-34.36%)
Mutual labels:  drag-and-drop, draggable
React Smooth Dnd
react wrapper components for smooth-dnd
Stars: ✭ 1,560 (+857.06%)
Mutual labels:  drag-and-drop, draggable
Lean Mean Drag And Drop
Drag&Drop Sorting and Reordering script for complex nested structures
Stars: ✭ 107 (-34.36%)
Mutual labels:  drag-and-drop, draggable
Bootstrap Grid Css
The grid and responsive utilities classes extracted from the Bootstrap 4 framework, compiled into CSS.
Stars: ✭ 119 (-26.99%)
Mutual labels:  grid, grid-layout
Svgdragtree
一个可以通过拖放 SVG 图标,来生成拥有树状结构的视图与数据的前端组件。 SDT example:
Stars: ✭ 113 (-30.67%)
Mutual labels:  drag-and-drop, draggable
React Flexa
Responsive React Flexbox (CSS Flexible Box Layout Module) grid system based heavily on the standard CSS API.
Stars: ✭ 120 (-26.38%)
Mutual labels:  grid, responsive
The Grid
Grid layout custom element with drag and drop capabilities
Stars: ✭ 122 (-25.15%)
Mutual labels:  grid, drag-and-drop
Flutter remote control
flutter remote control
Stars: ✭ 124 (-23.93%)
Mutual labels:  drag-and-drop, draggable
Framy Css
Very simple CSS Framework
Stars: ✭ 103 (-36.81%)
Mutual labels:  grid, responsive

Angular Grid Layout

npm MIT commitizen PRs

Angular Grid Layout is a grid layout system with draggable and resizable items for Angular Applications. It is mainly designed to create highly customizable dashboards.

Its core functionalities are based in the well known React-Grid-Layout library. It can be considered a 'port' (with some changes) to the Angular ecosystem. Both cover the same necessities.

demo example

Features

  • No dependencies
  • Draggable items
  • Resizable items
  • REDUX friendly (akita, ngrx, ngxs...)
  • Customizable Drag & Resize handles.
  • 3 modes of grid compaction: vertical, horizontal and free (exact same algorithm as React-Grid-Layout)
  • Add/Remove items
  • High performance
  • Supports touch devices
  • Auto-scrolling while dragging

Demos

Playground - Stackblitz

Custom handles

Real life example

Installation

To use @katoid/angular-grid-layout in your project install it via npm:

npm install @katoid/angular-grid-layout --save

Usage

Import KtdGridModule to the module where you want to use the grid:

import { KtdGridModule } from '@katoid/angular-grid-layout';

@NgModule({
  imports: [KtdGridModule]
})

Use it in your template:

<ktd-grid [cols]="cols"
          [rowHeight]="rowHeight"
          [layout]="layout"
          (layoutUpdated)="onLayoutUpdated($event)">
    <ktd-grid-item *ngFor="let item of layout; trackBy:trackById" [id]="item.id">
        <!-- Your grid item content goes here -->
    </ktd-grid-item>
</ktd-grid>

Where template variables could be:

import { ktdTrackById } from '@katoid/angular-grid-layout';

cols: number = 6;
rowHeight: number = 100;
layout: KtdGridLayout = [
    {id: '0', x: 0, y: 0, w: 3, h: 3},
    {id: '1', x: 3, y: 0, w: 3, h: 3},
    {id: '2', x: 0, y: 3, w: 3, h: 3},
    {id: '3', x: 3, y: 3, w: 3, h: 3},
];
trackById = ktdTrackById

API

Here is listed the basic API of both KtdGridComponent and KtdGridItemComponent. See source code for full knowledge of the API.

KtdGridComponent

/** Type of compaction that will be applied to the layout (vertical, horizontal or free). Defaults to 'vertical' */
@Input() compactType: KtdGridCompactType = 'vertical';

/** Row height in css pixels */
@Input() rowHeight: number = 100;

/** Number of columns  */
@Input() cols: number = 6;

/** Layout of the grid. Array of all the grid items with its 'id' and position on the grid. */
@Input() layout: KtdGridLayout;

/**
 * Parent element that contains the scroll. If an string is provided it would search that element by id on the dom.
 * If no data provided or null autoscroll is not performed.
 */
@Input() scrollableParent: HTMLElement | Document | string | null = null;

/** Number of CSS pixels that would be scrolled on each 'tick' when auto scroll is performed. */
@Input() scrollSpeed: number = 2;

/** Whether or not to update the internal layout when some dependent property change. */
@Input() compactOnPropsChange = true;

/** Emits when layout change */
@Output() layoutUpdated: EventEmitter<KtdGridLayout> = new EventEmitter<KtdGridLayout>();

/** Emits when drag starts */
@Output() dragStarted: EventEmitter<KtdDragStart> = new EventEmitter<KtdDragStart>();

/** Emits when resize starts */
@Output() resizeStarted: EventEmitter<KtdResizeStart> = new EventEmitter<KtdResizeStart>();

/** Emits when drag ends */
@Output() dragEnded: EventEmitter<KtdDragEnd> = new EventEmitter<KtdDragEnd>();

/** Emits when resize ends */
@Output() resizeEnded: EventEmitter<KtdResizeEnd> = new EventEmitter<KtdResizeEnd>();

KtdGridItem

/** Id of the grid item. This property is strictly compulsory. */
@Input() id: string;

/** Whether the item is draggable or not. Defaults to true. */
@Input() draggable: boolean = true;

/** Whether the item is resizable or not. Defaults to true. */
@Input() resizable: boolean = true;

/** CSS transition style. Note that for more performance is preferable only make transition on transform property. */
@Input() transition: string = 'transform 500ms ease, width 500ms ease, height 500ms ease';

/** Minimum amount of pixels that the user should move before it starts the drag sequence. */
@Input() dragStartThreshold: number = 0;

TODO features

  • [x] Add delete feature to Playground page.
  • [x] Add example with custom drag handles.
  • [x] Add Real life example with charts and grid items with some kind of controls.
  • [x] Add dragStartThreshold option to grid items.
  • [x] Auto Scroll vertical/horizontal if container is scrollable when dragging a grid item. (commit).
  • [ ] Add grid gap feature.
  • [ ] rowHeight to support also 'fit' as value instead of only CSS pixels (issue).
  • [ ] Grid support for static grid items.
  • [ ] Grid support for minWidth and minHeight on grid items.
  • [ ] Customizable drag placeholder.
  • [ ] Check grid compact horizontal algorithm, estrange behaviour when overflowing, also in react-grid-layout.
  • [ ] Add all other resize options (now is only available 'se-resize').
  • [ ] Documentation.

IMPORTANT: These features would be done in the near future. If any lib user needs them earlier, we encourage you to contribute to this project and speed up the process! To do so, please:

  1. Open an issue mentioning one of these features.
  2. Explain your thoughts on how to implement it & we will discuss the possible solutions.
  3. Do a Merge Request when the feature is done and tested.

Troubleshooting

  • Mutating the layout would cause an error like: 'ERROR TypeError: Cannot read property 'id' of undefined'. Never mutate the layout, always return a new instance when modifying it.
  • Always use trackBy for the ngFor that renders the ktd-grid-items. If not, Angular would always re-render all items when layout changes.
  • My Grid Item 'content' doesn't resize well when size changes. This may be caused for 'transform' property in ktd-grid-item, try to remove transform animations on 'width' and 'height' properties. You can also watch the real-life-example which uses other technique valid also.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].