I'm looking for a split-pane library - something that will let me have 2 tables on a screen, and the user can drag the middle divider to show more of one table or the other.

I know there are libraries out there that do this, like the shagstrom one, but I was looking for something that didn't rely on jQuery. Does one exist, and if so, can you please point me to it?

I'm looking for a split-pane library - something that will let me have 2 tables on a screen, and the user can drag the middle divider to show more of one table or the other.

I know there are libraries out there that do this, like the shagstrom one, but I was looking for something that didn't rely on jQuery. Does one exist, and if so, can you please point me to it?

• javascript
• angularjs
• split
• pane
• splitpane

Share Improve this question Follow asked Feb 3, 2016 at 12:39 KatieKatie 30511 gold badge33 silver badges1111 bronze badges 1

• 1 github./angular-ui/ui-layout - this? – Ankh Commented Feb 3, 2016 at 12:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can use Split.js which have no dependencies and works very well.

Simple example:

Split(['#one', '#two'], {
    sizes: [25, 75],
    minSize: 200
});

This is not an angular librairy but but can easily integrate it inside a directive.

There is a split.js angular wrapper,angular-split that works just fine run , here is an example, after running npm install angular-split --save

Add AngularSplitModule to your app module:

import { AngularSplitModule } from 'angular-split';

@NgModule({
declarations: [
AppComponent,
...
],
imports: [
AngularSplitModule,
...
],
providers: [...],
bootstrap: [AppComponent]
})
export class AppModule {}

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { AngularSplitModule } from 'angular-split'

@Component({
selector: 'my-app',
styles: [`
:host {
  display: block;
  width: 500px;
  height: 400px;
  background: grey;
 }
 `],
  template: `
  <split direction="horizontal">
      <split-area [size]="30">
          <p>Lorem ipsum dolor sit amet...</p>
      </split-area>
      <split-area [size]="70">
          <p>Sed ut perspiciatis unde omnis iste natus erro...</p>
      </split-area>
  </split>`,
})
export class App {}


@NgModule({
imports: [ BrowserModule, AngularSplitModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}

plunker