TreeTable demo height updates
parent
b6c96e83a0
commit
2e3d6c88cb
|
@ -3,7 +3,7 @@
|
||||||
<p>A column can be fixed during horizontal scrolling by enabling the <i>frozen</i> property on a Column. The location is defined with the <i>alignFrozen</i> that can be <i>left</i> or <i>right</i>.</p>
|
<p>A column can be fixed during horizontal scrolling by enabling the <i>frozen</i> property on a Column. The location is defined with the <i>alignFrozen</i> that can be <i>left</i> or <i>right</i>.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
|
<TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
|
||||||
<Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
|
<Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
|
||||||
<Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
|
<Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
|
||||||
<Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
|
<Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
|
||||||
|
@ -24,7 +24,7 @@ export default {
|
||||||
nodes: null,
|
nodes: null,
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
|
<TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
|
||||||
<Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
|
<Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
|
||||||
<Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
|
<Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
|
||||||
<Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
|
<Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
|
||||||
|
@ -36,7 +36,7 @@ export default {
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
|
<TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
|
||||||
<Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
|
<Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
|
||||||
<Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
|
<Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
|
||||||
<Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
|
<Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
|
||||||
|
@ -65,7 +65,7 @@ export default {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
|
<TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
|
||||||
<Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
|
<Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
|
||||||
<Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
|
<Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
|
||||||
<Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
|
<Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<p>Horizontal scrolling is enabled when the total width of columns exceeds table width.</p>
|
<p>Horizontal scrolling is enabled when the total width of columns exceeds table width.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
|
<TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
|
||||||
<Column field="name" header="Name" expander style="width: 250px"></Column>
|
<Column field="name" header="Name" expander style="width: 250px"></Column>
|
||||||
<Column field="size" header="Size" style="width: 250px"></Column>
|
<Column field="size" header="Size" style="width: 250px"></Column>
|
||||||
<Column field="type" header="Type 2" style="width: 250px"></Column>
|
<Column field="type" header="Type 2" style="width: 250px"></Column>
|
||||||
|
@ -24,7 +24,7 @@ export default {
|
||||||
nodes: null,
|
nodes: null,
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
|
<TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
|
||||||
<Column field="name" header="Name" expander style="width: 250px"></Column>
|
<Column field="name" header="Name" expander style="width: 250px"></Column>
|
||||||
<Column field="size" header="Size" style="width: 250px"></Column>
|
<Column field="size" header="Size" style="width: 250px"></Column>
|
||||||
<Column field="type" header="Type 2" style="width: 250px"></Column>
|
<Column field="type" header="Type 2" style="width: 250px"></Column>
|
||||||
|
@ -36,7 +36,7 @@ export default {
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
|
<TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
|
||||||
<Column field="name" header="Name" expander style="width: 250px"></Column>
|
<Column field="name" header="Name" expander style="width: 250px"></Column>
|
||||||
<Column field="size" header="Size" style="width: 250px"></Column>
|
<Column field="size" header="Size" style="width: 250px"></Column>
|
||||||
<Column field="type" header="Type 2" style="width: 250px"></Column>
|
<Column field="type" header="Type 2" style="width: 250px"></Column>
|
||||||
|
@ -65,7 +65,7 @@ export default {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
|
<TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
|
||||||
<Column field="name" header="Name" expander style="width: 250px"></Column>
|
<Column field="name" header="Name" expander style="width: 250px"></Column>
|
||||||
<Column field="size" header="Size" style="width: 250px"></Column>
|
<Column field="size" header="Size" style="width: 250px"></Column>
|
||||||
<Column field="type" header="Type 2" style="width: 250px"></Column>
|
<Column field="type" header="Type 2" style="width: 250px"></Column>
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<p>Adding <i>scrollable</i> property along with a <i>scrollHeight</i> for the data viewport enables vertical scrolling with fixed headers.</p>
|
<p>Adding <i>scrollable</i> property along with a <i>scrollHeight</i> for the data viewport enables vertical scrolling with fixed headers.</p>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<TreeTable :value="nodes" scrollable scrollHeight="200px">
|
<TreeTable :value="nodes" scrollable scrollHeight="270px">
|
||||||
<Column field="name" header="Name" expander></Column>
|
<Column field="name" header="Name" expander></Column>
|
||||||
<Column field="size" header="Size"></Column>
|
<Column field="size" header="Size"></Column>
|
||||||
<Column field="type" header="Type"></Column>
|
<Column field="type" header="Type"></Column>
|
||||||
|
@ -21,7 +21,7 @@ export default {
|
||||||
nodes: null,
|
nodes: null,
|
||||||
code: {
|
code: {
|
||||||
basic: `
|
basic: `
|
||||||
<TreeTable :value="nodes" scrollable scrollHeight="200px">
|
<TreeTable :value="nodes" scrollable scrollHeight="270px">
|
||||||
<Column field="name" header="Name" expander></Column>
|
<Column field="name" header="Name" expander></Column>
|
||||||
<Column field="size" header="Size"></Column>
|
<Column field="size" header="Size"></Column>
|
||||||
<Column field="type" header="Type"></Column>
|
<Column field="type" header="Type"></Column>
|
||||||
|
@ -30,7 +30,7 @@ export default {
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<TreeTable :value="nodes" scrollable scrollHeight="200px">
|
<TreeTable :value="nodes" scrollable scrollHeight="270px">
|
||||||
<Column field="name" header="Name" expander></Column>
|
<Column field="name" header="Name" expander></Column>
|
||||||
<Column field="size" header="Size"></Column>
|
<Column field="size" header="Size"></Column>
|
||||||
<Column field="type" header="Type"></Column>
|
<Column field="type" header="Type"></Column>
|
||||||
|
@ -56,7 +56,7 @@ export default {
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<TreeTable :value="nodes" scrollable scrollHeight="200px">
|
<TreeTable :value="nodes" scrollable scrollHeight="270px">
|
||||||
<Column field="name" header="Name" expander></Column>
|
<Column field="name" header="Name" expander></Column>
|
||||||
<Column field="size" header="Size"></Column>
|
<Column field="size" header="Size"></Column>
|
||||||
<Column field="type" header="Type"></Column>
|
<Column field="type" header="Type"></Column>
|
||||||
|
|
Loading…
Reference in New Issue