vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #1024 - Add showGridlines and stripedRows props to DataTable

pull/1047/head
Cagatay Civici 2021-02-25 16:57:26 +03:00
parent cc1a9c13a1
commit 0922b16850
11 changed files with 59 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/datatable/DataTable.d.ts vendored
View File

@ -56,6 +56,8 @@ interface DataTableProps {
frozenValue?: any[]; frozenValue?: any[];
responsiveLayout?: string; responsiveLayout?: string;
breakpoing?: string; breakpoing?: string;
showGridlines?: boolean;
stripedRows?: boolean;
} }
declare class DataTable { declare class DataTable {

12
src/components/datatable/DataTable.vue
View File

@ -301,6 +301,14 @@ export default {
breakpoint: { breakpoint: {
type: String, type: String,
default: '960px' default: '960px'
},
showGridlines: {
type: Boolean,
default: false
},
stripedRows: {
type: Boolean,
default: false
} }
}, },
data() { data() {
@ -1627,7 +1635,9 @@ export default {
'p-datatable-scrollable-both': this.scrollable && this.scrollDirection === 'both', 'p-datatable-scrollable-both': this.scrollable && this.scrollDirection === 'both',
'p-datatable-flex-scrollable': (this.scrollable && this.scrollHeight === 'flex'), 'p-datatable-flex-scrollable': (this.scrollable && this.scrollHeight === 'flex'),
'p-datatable-responsive-stack': this.responsiveLayout === 'stack', 'p-datatable-responsive-stack': this.responsiveLayout === 'stack',
'p-datatable-responsive-scroll': this.responsiveLayout === 'scroll' 'p-datatable-responsive-scroll': this.responsiveLayout === 'scroll',
'p-datatable-striped': this.stripedRows,
'p-datatable-gridlines': this.showGridlines
} }
]; ];
}, },

1
src/components/treetable/TreeTable.d.ts vendored
View File

@ -35,6 +35,7 @@ interface TreeTableProps {
resizableColumns?: boolean; resizableColumns?: boolean;
columnResizeMode?: string; columnResizeMode?: string;
indentation?: number; indentation?: number;
showGridlines?: boolean;
} }
declare class TreeTable { declare class TreeTable {

5
src/components/treetable/TreeTable.vue
View File

@ -211,6 +211,10 @@ export default {
indentation: { indentation: {
type: Number, type: Number,
default: 1 default: 1
},
showGridlines: {
type: Boolean,
default: false
} }
}, },
documentColumnResizeListener: null, documentColumnResizeListener: null,
@ -794,6 +798,7 @@ export default {
'p-treetable-auto-layout': this.autoLayout, 'p-treetable-auto-layout': this.autoLayout,
'p-treetable-resizable': this.resizableColumns, 'p-treetable-resizable': this.resizableColumns,
'p-treetable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit', 'p-treetable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
'p-treetable-gridlines': this.showGridlines
}]; }];
}, },
columns() { columns() {

12
src/views/datatable/DataTableColResizeDemo.vue
View File

@ -11,7 +11,7 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Fit Mode</h5> <h5>Fit Mode</h5>
<DataTable :value="products" :resizableColumns="true" columnResizeMode="fit" class="p-datatable-gridlines"> <DataTable :value="products" :resizableColumns="true" columnResizeMode="fit" showGridlines>
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>
@ -21,7 +21,7 @@
<div class="card"> <div class="card">
<h5>Expand Mode</h5> <h5>Expand Mode</h5>
<DataTable :value="products" :resizableColumns="true" columnResizeMode="expand" class="p-datatable-gridlines"> <DataTable :value="products" :resizableColumns="true" columnResizeMode="expand" showGridlines>
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>
@ -38,7 +38,7 @@
</div> </div>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;h3&gt;Fit Mode&lt;/h3&gt; &lt;h3&gt;Fit Mode&lt;/h3&gt;
&lt;DataTable :value="products" :resizableColumns="true" columnResizeMode="fit" class="p-datatable-gridlines"&gt; &lt;DataTable :value="products" :resizableColumns="true" columnResizeMode="fit" showGridlines&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt; &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
@ -46,7 +46,7 @@
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;h3&gt;Expand Mode&lt;/h3&gt; &lt;h3&gt;Expand Mode&lt;/h3&gt;
&lt;DataTable :value="products" :resizableColumns="true" columnResizeMode="expand" class="p-datatable-gridlines"&gt; &lt;DataTable :value="products" :resizableColumns="true" columnResizeMode="expand" showGridlines&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt; &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
@ -95,7 +95,7 @@ export default {
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Fit Mode</h5> <h5>Fit Mode</h5>
<DataTable :value="products" :resizableColumns="true" columnResizeMode="fit" class="p-datatable-gridlines"> <DataTable :value="products" :resizableColumns="true" columnResizeMode="fit" showGridlines>
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>
@ -105,7 +105,7 @@ export default {
<div class="card"> <div class="card">
<h5>Expand Mode</h5> <h5>Expand Mode</h5>
<DataTable :value="products" :resizableColumns="true" columnResizeMode="expand" class="p-datatable-gridlines"> <DataTable :value="products" :resizableColumns="true" columnResizeMode="expand" showGridlines>
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>

12
src/views/datatable/DataTableDoc.vue
View File

@ -2211,6 +2211,18 @@ export default {
<td>960px</td> <td>960px</td>
<td>The breakpoint to define the maximum width boundary when using stack responsive layout.</td> <td>The breakpoint to define the maximum width boundary when using stack responsive layout.</td>
</tr> </tr>
<tr>
<td>showGridlines</td>
<td>boolean</td>
<td>false</td>
<td>Whether to show grid lines between cells.</td>
</tr>
<tr>
<td>stripedRows</td>
<td>boolean</td>
<td>false</td>
<td>Whether to displays rows with alternating colors.</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>

4
src/views/datatable/DataTableFilterDemo.vue
View File

@ -11,7 +11,7 @@
<div class="card"> <div class="card">
<h5>Filter Menu</h5> <h5>Filter Menu</h5>
<p>Filters are displayed in an overlay.</p> <p>Filters are displayed in an overlay.</p>
<DataTable :value="customers1" :paginator="true" class="p-datatable-customers p-datatable-gridlines" :rows="10" <DataTable :value="customers1" :paginator="true" class="p-datatable-customers" showGridlines :rows="10"
dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll" dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll"
:globalFilterFields="['name','country.name','representative.name','balance','status']"> :globalFilterFields="['name','country.name','representative.name','balance','status']">
<template #header> <template #header>
@ -215,7 +215,7 @@
&lt;div class="card"&gt; &lt;div class="card"&gt;
&lt;h5&gt;Filter Menu&lt;/h5&gt; &lt;h5&gt;Filter Menu&lt;/h5&gt;
&lt;p&gt;Filters are displayed in an overlay.&lt;/p&gt; &lt;p&gt;Filters are displayed in an overlay.&lt;/p&gt;
&lt;DataTable :value="customers1" :paginator="true" class="p-datatable-customers p-datatable-gridlines" :rows="10" &lt;DataTable :value="customers1" :paginator="true" class="p-datatable-customers" showGridlines :rows="10"
dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll" dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll"
:globalFilterFields="['name','country.name','representative.name','balance','status']"&gt; :globalFilterFields="['name','country.name','representative.name','balance','status']"&gt;
&lt;template #header&gt; &lt;template #header&gt;

8
src/views/datatable/DataTableGridLinesDemo.vue
View File

@ -3,13 +3,13 @@
<div class="content-section introduction"> <div class="content-section introduction">
<div class="feature-intro"> <div class="feature-intro">
<h1>DataTable <span>GridLines</span></h1> <h1>DataTable <span>GridLines</span></h1>
<p>Adding <b>p-datatable-gridlines</b> displays borders between cells. Note: Some themes may always display gridlines by design.</p> <p>Enabling <b>showGridlines</b> displays borders between cells. Note: Some themes may always display gridlines by design.</p>
</div> </div>
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<DataTable :value="products" class="p-datatable-gridlines"> <DataTable :value="products" showGridlines>
<template #header> <template #header>
Header Header
</template> </template>
@ -31,7 +31,7 @@
<LiveEditor name="DataTableDemo" :sources="sources" service="ProductService" data="products-small" :components="['Column']" /> <LiveEditor name="DataTableDemo" :sources="sources" service="ProductService" data="products-small" :components="['Column']" />
</div> </div>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;DataTable :value="products" class="p-datatable-gridlines"&gt; &lt;DataTable :value="products" showGridlines&gt;
&lt;template #header&gt; &lt;template #header&gt;
Header Header
&lt;/template&gt; &lt;/template&gt;
@ -85,7 +85,7 @@ export default {
<div class="layout-content"> <div class="layout-content">
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<DataTable :value="products" class="p-datatable-gridlines"> <DataTable :value="products" showGridlines>
<template #header> <template #header>
Header Header
</template> </template>

8
src/views/datatable/DataTableStripedDemo.vue
View File

@ -3,13 +3,13 @@
<div class="content-section introduction"> <div class="content-section introduction">
<div class="feature-intro"> <div class="feature-intro">
<h1>DataTable <span>Striped Rows</span></h1> <h1>DataTable <span>Striped Rows</span></h1>
<p>Adding <i>p-datatable-striped</i> displays striped rows.</p> <p>Adding <i>stripedRows</i> displays rows with alternating colors.</p>
</div> </div>
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<DataTable :value="products" class="p-datatable-striped"> <DataTable :value="products" stripedRows>
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>
@ -25,7 +25,7 @@
<LiveEditor name="DataTableDemo" :sources="sources" service="ProductService" data="products-small" :components="['Column']" /> <LiveEditor name="DataTableDemo" :sources="sources" service="ProductService" data="products-small" :components="['Column']" />
</div> </div>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;DataTable :value="products" class="p-datatable-striped"&gt; &lt;DataTable :value="products" stripedRows&gt;
&lt;Column field="code" header="Code"&gt;&lt;/Column&gt; &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
&lt;Column field="category" header="Category"&gt;&lt;/Column&gt; &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
@ -73,7 +73,7 @@ export default {
<div class="layout-content"> <div class="layout-content">
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<DataTable :value="products" class="p-datatable-striped"> <DataTable :value="products" stripedRows>
<Column field="code" header="Code"></Column> <Column field="code" header="Code"></Column>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>

12
src/views/treetable/TreeTableColResizeDemo.vue
View File

@ -11,7 +11,7 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Fit Mode</h5> <h5>Fit Mode</h5>
<TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="fit" class="p-treetable-gridlines"> <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="fit" showGridlines>
<Column field="name" header="Name" :expander="true"></Column> <Column field="name" header="Name" :expander="true"></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>
@ -20,7 +20,7 @@
<div class="card"> <div class="card">
<h5>Expand Mode</h5> <h5>Expand Mode</h5>
<TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" class="p-treetable-gridlines"> <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines>
<Column field="name" header="Name" :expander="true"></Column> <Column field="name" header="Name" :expander="true"></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>
@ -36,14 +36,14 @@
</div> </div>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;h3&gt;Fit Mode&lt;/h3&gt; &lt;h3&gt;Fit Mode&lt;/h3&gt;
&lt;TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="fit" class="p-treetable-gridlines"&gt; &lt;TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="fit" showGridlines&gt;
&lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
&lt;Column field="size" header="Size"&gt;&lt;/Column&gt; &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
&lt;Column field="type" header="Type"&gt;&lt;/Column&gt; &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
&lt;/TreeTable&gt; &lt;/TreeTable&gt;
&lt;h3&gt;Expand Mode&lt;/h3&gt; &lt;h3&gt;Expand Mode&lt;/h3&gt;
&lt;TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" class="p-treetable-gridlines"&gt; &lt;TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines&gt;
&lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt; &lt;Column field="name" header="Name" :expander="true"&gt;&lt;/Column&gt;
&lt;Column field="size" header="Size"&gt;&lt;/Column&gt; &lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
&lt;Column field="type" header="Type"&gt;&lt;/Column&gt; &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
@ -92,7 +92,7 @@ export default {
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Fit Mode</h5> <h5>Fit Mode</h5>
<TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="fit" class="p-treetable-gridlines"> <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="fit" showGridlines>
<Column field="name" header="Name" :expander="true"></Column> <Column field="name" header="Name" :expander="true"></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>
@ -101,7 +101,7 @@ export default {
<div class="card"> <div class="card">
<h5>Expand Mode</h5> <h5>Expand Mode</h5>
<TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" class="p-treetable-gridlines"> <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines>
<Column field="name" header="Name" :expander="true"></Column> <Column field="name" header="Name" :expander="true"></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>

6
src/views/treetable/TreeTableDoc.vue
View File

@ -1459,6 +1459,12 @@ export default {
<td>number</td> <td>number</td>
<td>1</td> <td>1</td>
<td>Indentation factor as rem value for children nodes. Defaults to 1rem.</td> <td>Indentation factor as rem value for children nodes. Defaults to 1rem.</td>
</tr>
<tr>
<td>showGridlines</td>
<td>boolean</td>
<td>false</td>
<td>Whether to show grid lines between cells.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>