diff --git a/src/components/datatable/DataTable.d.ts b/src/components/datatable/DataTable.d.ts
index 4bddc01a7..0dfa91764 100755
--- a/src/components/datatable/DataTable.d.ts
+++ b/src/components/datatable/DataTable.d.ts
@@ -56,6 +56,8 @@ interface DataTableProps {
     frozenValue?: any[];
     responsiveLayout?: string;
     breakpoing?: string;
+    showGridlines?: boolean;
+    stripedRows?: boolean;
 }
 
 declare class DataTable {
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 98e933460..7da9d8b50 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -301,6 +301,14 @@ export default {
         breakpoint: {
             type: String,
             default: '960px'
+        },
+        showGridlines: {
+            type: Boolean,
+            default: false
+        },
+        stripedRows: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -1627,7 +1635,9 @@ export default {
                     'p-datatable-scrollable-both': this.scrollable && this.scrollDirection === 'both',
                     'p-datatable-flex-scrollable': (this.scrollable && this.scrollHeight === 'flex'),
                     '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
                 }
             ];
         },
diff --git a/src/components/treetable/TreeTable.d.ts b/src/components/treetable/TreeTable.d.ts
index db3126b09..f7261a457 100755
--- a/src/components/treetable/TreeTable.d.ts
+++ b/src/components/treetable/TreeTable.d.ts
@@ -35,6 +35,7 @@ interface TreeTableProps {
     resizableColumns?: boolean;
     columnResizeMode?: string;
     indentation?: number;
+    showGridlines?: boolean;
 }
 
 declare class TreeTable {
diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
index 5d8e5caeb..708deb466 100755
--- a/src/components/treetable/TreeTable.vue
+++ b/src/components/treetable/TreeTable.vue
@@ -211,6 +211,10 @@ export default {
         indentation: {
             type: Number,
             default: 1
+        },
+        showGridlines: {
+            type: Boolean,
+            default: false
         }
     },
     documentColumnResizeListener: null,
@@ -794,6 +798,7 @@ export default {
                 'p-treetable-auto-layout': this.autoLayout,
                 'p-treetable-resizable': this.resizableColumns,
                 'p-treetable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
+                'p-treetable-gridlines': this.showGridlines
             }];
         },
         columns() {
diff --git a/src/views/datatable/DataTableColResizeDemo.vue b/src/views/datatable/DataTableColResizeDemo.vue
index 8224f4714..ff02bd5ea 100755
--- a/src/views/datatable/DataTableColResizeDemo.vue
+++ b/src/views/datatable/DataTableColResizeDemo.vue
@@ -11,7 +11,7 @@
 		<div class="content-section implementation">
             <div class="card">
                 <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="name" header="Name"></Column>
                     <Column field="category" header="Category"></Column>
@@ -21,7 +21,7 @@
 
             <div class="card">
                 <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="name" header="Name"></Column>
                     <Column field="category" header="Category"></Column>
@@ -38,7 +38,7 @@
                     </div>
 <pre v-code><code><template v-pre>
 &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="name" header="Name"&gt;&lt;/Column&gt;
     &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
@@ -46,7 +46,7 @@
 &lt;/DataTable&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="name" header="Name"&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="card">
                 <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="name" header="Name"></Column>
                     <Column field="category" header="Category"></Column>
@@ -105,7 +105,7 @@ export default {
 
             <div class="card">
                 <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="name" header="Name"></Column>
                     <Column field="category" header="Category"></Column>
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index 133bb9e92..a615ed670 100755
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -2211,6 +2211,18 @@ export default {
                                 <td>960px</td>
                                 <td>The breakpoint to define the maximum width boundary when using stack responsive layout.</td>
                             </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>
                     </table>
                 </div>
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index 2a0817af0..94096da44 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -11,7 +11,7 @@
             <div class="card">
                 <h5>Filter Menu</h5>
                 <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"
                     :globalFilterFields="['name','country.name','representative.name','balance','status']">
                     <template #header>
@@ -215,7 +215,7 @@
 &lt;div class="card"&gt;
     &lt;h5&gt;Filter Menu&lt;/h5&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"
         :globalFilterFields="['name','country.name','representative.name','balance','status']"&gt;
         &lt;template #header&gt;
diff --git a/src/views/datatable/DataTableGridLinesDemo.vue b/src/views/datatable/DataTableGridLinesDemo.vue
index 32f9adbbb..60a7a63c9 100644
--- a/src/views/datatable/DataTableGridLinesDemo.vue
+++ b/src/views/datatable/DataTableGridLinesDemo.vue
@@ -3,13 +3,13 @@
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<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 class="content-section implementation">
             <div class="card">
-                <DataTable :value="products" class="p-datatable-gridlines">
+                <DataTable :value="products" showGridlines>
                     <template #header>
                         Header
                     </template>
@@ -31,7 +31,7 @@
                         <LiveEditor name="DataTableDemo" :sources="sources" service="ProductService" data="products-small" :components="['Column']" />
                     </div>
 <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;
         Header
     &lt;/template&gt;
@@ -85,7 +85,7 @@ export default {
     <div class="layout-content">
         <div class="content-section implementation">
             <div class="card">
-                <DataTable :value="products" class="p-datatable-gridlines">
+                <DataTable :value="products" showGridlines>
                     <template #header>
                         Header
                     </template>
diff --git a/src/views/datatable/DataTableStripedDemo.vue b/src/views/datatable/DataTableStripedDemo.vue
index 26ac08ac0..ebda3d9b1 100644
--- a/src/views/datatable/DataTableStripedDemo.vue
+++ b/src/views/datatable/DataTableStripedDemo.vue
@@ -3,13 +3,13 @@
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<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 class="content-section implementation">
             <div class="card">
-                <DataTable :value="products" class="p-datatable-striped">
+                <DataTable :value="products" stripedRows>
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
                     <Column field="category" header="Category"></Column>
@@ -25,7 +25,7 @@
                         <LiveEditor name="DataTableDemo" :sources="sources" service="ProductService" data="products-small" :components="['Column']" />
                     </div>
 <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="name" header="Name"&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="content-section implementation">
             <div class="card">
-                <DataTable :value="products" class="p-datatable-striped">
+                <DataTable :value="products" stripedRows>
                     <Column field="code" header="Code"></Column>
                     <Column field="name" header="Name"></Column>
                     <Column field="category" header="Category"></Column>
diff --git a/src/views/treetable/TreeTableColResizeDemo.vue b/src/views/treetable/TreeTableColResizeDemo.vue
index 3c5dacc3b..10d4b165f 100755
--- a/src/views/treetable/TreeTableColResizeDemo.vue
+++ b/src/views/treetable/TreeTableColResizeDemo.vue
@@ -11,7 +11,7 @@
         <div class="content-section implementation">
             <div class="card">
                 <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="size" header="Size"></Column>
                     <Column field="type" header="Type"></Column>
@@ -20,7 +20,7 @@
 
             <div class="card">
                 <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="size" header="Size"></Column>
                     <Column field="type" header="Type"></Column>
@@ -36,14 +36,14 @@
                     </div>
 <pre v-code><code><template v-pre>
 &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="size" header="Size"&gt;&lt;/Column&gt;
     &lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
 &lt;/TreeTable&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="size" header="Size"&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="card">
                 <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="size" header="Size"></Column>
                     <Column field="type" header="Type"></Column>
@@ -101,7 +101,7 @@ export default {
 
             <div class="card">
                 <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="size" header="Size"></Column>
                     <Column field="type" header="Type"></Column>
diff --git a/src/views/treetable/TreeTableDoc.vue b/src/views/treetable/TreeTableDoc.vue
index 389c18f04..86720b209 100755
--- a/src/views/treetable/TreeTableDoc.vue
+++ b/src/views/treetable/TreeTableDoc.vue
@@ -1459,6 +1459,12 @@ export default {
                                 <td>number</td>
                                 <td>1</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>
 						</tbody>
 					</table>