diff --git a/packages/components-dev/table/module.ts b/packages/components-dev/table/module.ts
index c30a2d95ca..cf0925fb4f 100644
--- a/packages/components-dev/table/module.ts
+++ b/packages/components-dev/table/module.ts
@@ -2,10 +2,22 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
import { KbqButtonModule } from '@koobiq/components/button';
import { KbqComponentColors } from '@koobiq/components/core';
import { KbqTableModule } from '@koobiq/components/table';
+import { TableDisableHoverExample } from 'packages/docs-examples/components/table';
+
+@Component({
+ selector: 'dev-examples',
+ imports: [TableDisableHoverExample],
+ template: `
+
+
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DevDocsExamples {}
@Component({
selector: 'dev-app',
- imports: [KbqTableModule, KbqButtonModule],
+ imports: [KbqTableModule, KbqButtonModule, DevDocsExamples],
templateUrl: './template.html',
styleUrls: ['./styles.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/packages/components-dev/table/template.html b/packages/components-dev/table/template.html
index ec38b8dd09..fbb10bc2b5 100644
--- a/packages/components-dev/table/template.html
+++ b/packages/components-dev/table/template.html
@@ -1,3 +1,5 @@
+
+
default
diff --git a/packages/components/table/__screenshots__/01-dark.png b/packages/components/table/__screenshots__/01-dark.png
index 3622743d4b..e1669e88cf 100644
Binary files a/packages/components/table/__screenshots__/01-dark.png and b/packages/components/table/__screenshots__/01-dark.png differ
diff --git a/packages/components/table/__screenshots__/01-light.png b/packages/components/table/__screenshots__/01-light.png
index 0f9216731c..3fd4b6ca93 100644
Binary files a/packages/components/table/__screenshots__/01-light.png and b/packages/components/table/__screenshots__/01-light.png differ
diff --git a/packages/components/table/_table-theme.scss b/packages/components/table/_table-theme.scss
index b495bbcda7..c2654f9bbd 100644
--- a/packages/components/table/_table-theme.scss
+++ b/packages/components/table/_table-theme.scss
@@ -16,7 +16,11 @@
& > td {
color: var(--kbq-foreground-contrast);
}
+ }
+ }
+ &:not(.kbq-table_disable-hover) > tbody {
+ & > tr {
&.kbq-hovered td,
&:hover td {
background-color: var(--kbq-states-background-transparent-hover);
diff --git a/packages/components/table/e2e.ts b/packages/components/table/e2e.ts
index 868ffb5d99..acdc1a6ddb 100644
--- a/packages/components/table/e2e.ts
+++ b/packages/components/table/e2e.ts
@@ -136,6 +136,28 @@ import { KbqTableModule } from '@koobiq/components/table';
+
+
+
+
+
+
+ @for (th of [0, 1, 2, 3]; track $index) {
+ | Header |
+ }
+
+
+
+ @for (tr of [0, 1]; track $index) {
+
+ @for (td of [0, 1, 2, 3]; track $index) {
+ | Cell |
+ }
+
+ }
+
+
+
`,
styles: `
:host {
diff --git a/packages/components/table/table.component.ts b/packages/components/table/table.component.ts
index dcbeebc165..8d3f9aaa9c 100644
--- a/packages/components/table/table.component.ts
+++ b/packages/components/table/table.component.ts
@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, Component, Directive, ViewEncapsulation, contentChild, input } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ Directive,
+ ViewEncapsulation,
+ booleanAttribute,
+ contentChild,
+ input
+} from '@angular/core';
import { KbqButton } from '@koobiq/components/button';
@Component({
@@ -9,12 +17,14 @@ import { KbqButton } from '@koobiq/components/button';
encapsulation: ViewEncapsulation.None,
host: {
class: 'kbq-table',
- '[class.kbq-table_bordered]': 'border()'
+ '[class.kbq-table_bordered]': 'border()',
+ '[class.kbq-table_disable-hover]': 'disableHover()'
},
exportAs: 'kbqTable'
})
export class KbqTable {
- readonly border = input(false);
+ readonly border = input(false, { transform: booleanAttribute });
+ readonly disableHover = input(false, { transform: booleanAttribute });
}
@Directive({
diff --git a/packages/components/table/table.en.md b/packages/components/table/table.en.md
index bc3fe18d0c..5322caaaf1 100644
--- a/packages/components/table/table.en.md
+++ b/packages/components/table/table.en.md
@@ -13,3 +13,9 @@ In most cases, borders should be avoided, but sometimes they help support the la
Borders are also useful in tables with complex structures — for example, when rows are grouped or some cells are merged vertically.
+
+### Disable hover
+
+Use `disableHover` to remove the background color change on row hover. This is useful when rows are not interactive and the hover highlight would be misleading.
+
+
diff --git a/packages/components/table/table.ru.md b/packages/components/table/table.ru.md
index 34e6b871d6..2df8528cae 100644
--- a/packages/components/table/table.ru.md
+++ b/packages/components/table/table.ru.md
@@ -13,3 +13,9 @@
Также линейки полезны в таблицах со сложной структурой. Например, когда строки собраны в группы или некоторые ячейки объединены по вертикали.
+
+### Отключение подсветки при наведении
+
+Если строки не являются интерактивными, подсветка при наведении может вводить в заблуждение. Атрибут `disableHover` позволяет убрать этот эффект.
+
+
diff --git a/packages/docs-examples/components/table/index.ts b/packages/docs-examples/components/table/index.ts
index b9d779d7ae..b6c5a87bda 100644
--- a/packages/docs-examples/components/table/index.ts
+++ b/packages/docs-examples/components/table/index.ts
@@ -1,14 +1,16 @@
import { NgModule } from '@angular/core';
+import { TableDisableHoverExample } from './table-disable-hover/table-disable-hover-example';
import { TableFullWidthExample } from './table-full-width/table-full-width-example';
import { TableOverviewExample } from './table-overview/table-overview-example';
import { TableWithBordersExample } from './table-with-borders/table-with-borders-example';
-export { TableFullWidthExample, TableOverviewExample, TableWithBordersExample };
+export { TableDisableHoverExample, TableFullWidthExample, TableOverviewExample, TableWithBordersExample };
const EXAMPLES = [
TableOverviewExample,
TableWithBordersExample,
- TableFullWidthExample
+ TableFullWidthExample,
+ TableDisableHoverExample
];
@NgModule({
diff --git a/packages/docs-examples/components/table/table-disable-hover/table-disable-hover-example.ts b/packages/docs-examples/components/table/table-disable-hover/table-disable-hover-example.ts
new file mode 100644
index 0000000000..f3bddd81ac
--- /dev/null
+++ b/packages/docs-examples/components/table/table-disable-hover/table-disable-hover-example.ts
@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { KbqTableModule } from '@koobiq/components/table';
+
+/**
+ * @title Table without hover
+ */
+@Component({
+ selector: 'table-disable-hover-example',
+ imports: [KbqTableModule],
+ template: `
+
+
+
+ | File |
+ Owner |
+ Modified |
+
+
+
+ @for (row of rows; track row.name) {
+
+ | {{ row.name }} |
+ {{ row.owner }} |
+ {{ row.modified }} |
+
+ }
+
+
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TableDisableHoverExample {
+ protected readonly rows = [
+ { name: 'document.txt', owner: 'User 1', modified: '27 мая 2024' },
+ { name: 'report-2023.pdf', owner: 'User 2', modified: '1 дек 2023' },
+ { name: 'notes.doc', owner: 'User 3', modified: '7 мар 2024' },
+ { name: 'archive.zip', owner: 'User 4', modified: '24 авг 2022' }
+ ];
+}
diff --git a/tools/public_api_guard/components/table.api.md b/tools/public_api_guard/components/table.api.md
index 9c9fb2c79f..f14fc8a45b 100644
--- a/tools/public_api_guard/components/table.api.md
+++ b/tools/public_api_guard/components/table.api.md
@@ -12,9 +12,11 @@ import { KbqButton } from '@koobiq/components/button';
// @public (undocumented)
export class KbqTable {
// (undocumented)
- readonly border: i0.InputSignal;
+ readonly border: i0.InputSignalWithTransform;
// (undocumented)
- static ɵcmp: i0.ɵɵComponentDeclaration;
+ readonly disableHover: i0.InputSignalWithTransform;
+ // (undocumented)
+ static ɵcmp: i0.ɵɵComponentDeclaration;
// (undocumented)
static ɵfac: i0.ɵɵFactoryDeclaration;
}