Skip to content

Commit 25c8902

Browse files
mrholekmrholek
committed
feat(CTable): add striped columns
1 parent cbeabe1 commit 25c8902

File tree

4 files changed

+81
-32
lines changed

4 files changed

+81
-32
lines changed

‎packages/coreui-vue/src/components/table/CTable.ts

+10
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,15 @@ const CTable = defineComponent({
9797
type: Boolean,
9898
required: false,
9999
},
100+
/**
101+
* Add zebra-striping to any table column.
102+
*
103+
* @since 4.4.0
104+
*/
105+
stripedColumns: {
106+
type: Boolean,
107+
required: false,
108+
},
100109
},
101110
setup(props, { slots, attrs }) {
102111
const table = () =>
@@ -115,6 +124,7 @@ const CTable = defineComponent({
115124
'table-hover': props.hover,
116125
'table-sm': props.small,
117126
'table-striped': props.striped,
127+
'table-striped-columns': props.stripedColumns,
118128
},
119129
attrs.class,
120130
],

‎packages/docs/api/form/CFormInput.api.md

+18-18
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,24 @@ import CFormInput from '@coreui/vue/src/components/form/CFormInput'
88

99
#### Props
1010

11-
| Prop name | Description | Type | Values | Default |
12-
| ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------------------------- | ------- |
13-
| **disabled** | Toggle the disabled state for the component. | boolean | - | |
14-
| **feedback** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable feedback.false | string | - | |
15-
| **feedback-invalid** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable feedback.false | string | - | |
16-
| **feedback-valid** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.false | string | - | |
17-
| **floating-label** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.false | string | - | |
18-
| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | string | - | |
19-
| **invalid** | Set component validation state to invalid. | boolean | - | |
20-
| **label** <br><div class="badge bg-primary">4.3.0+</div> | Add a caption for a component.false | string | - | |
21-
| **model-value** | The default name for a value passed using v-model. | string | - | - |
22-
| **plain-text** | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. | boolean | - | |
23-
| **readonly** | Toggle the readonly state for the component. | boolean | - | |
24-
| **size** | Size the component small or large. | string | `'sm' \| 'lg'` | |
25-
| **text** <br><div class="badge bg-primary">4.3.0+</div> | Add helper text to the component.false | string | - | |
26-
| **tooltip-feedback** <br><div class="badge bg-primary">4.3.0+</div> | Display validation feedback in a styled tooltip.false | boolean | - | |
27-
| **type** | Specifies the type of component. | string | `'color' \| 'file' \| 'text' \| string` | 'text' |
28-
| **valid** | Set component validation state to valid. | boolean | - | |
11+
| Prop name | Description | Type | Values | Default |
12+
| ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | --------------------------------------- | ------- |
13+
| **disabled** | Toggle the disabled state for the component. | boolean | - | |
14+
| **feedback** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable feedback.false | string | - | |
15+
| **feedback-invalid** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable feedback.false | string | - | |
16+
| **feedback-valid** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.false | string | - | |
17+
| **floating-label** <br><div class="badge bg-primary">4.3.0+</div> | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.false | string | - | |
18+
| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | string | - | |
19+
| **invalid** | Set component validation state to invalid. | boolean | - | |
20+
| **label** <br><div class="badge bg-primary">4.3.0+</div> | Add a caption for a component.false | string | - | |
21+
| **model-value** | The default name for a value passed using v-model. | File\|number\|string | - | - |
22+
| **plain-text** | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. | boolean | - | |
23+
| **readonly** | Toggle the readonly state for the component. | boolean | - | |
24+
| **size** | Size the component small or large. | string | `'sm' \| 'lg'` | |
25+
| **text** <br><div class="badge bg-primary">4.3.0+</div> | Add helper text to the component.false | string | - | |
26+
| **tooltip-feedback** <br><div class="badge bg-primary">4.3.0+</div> | Display validation feedback in a styled tooltip.false | boolean | - | |
27+
| **type** | Specifies the type of component. | string | `'color' \| 'file' \| 'text' \| string` | 'text' |
28+
| **valid** | Set component validation state to valid. | boolean | - | |
2929

3030
#### Events
3131

‎packages/docs/api/table/CTable.api.md

+13-12
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,16 @@ import CTable from '@coreui/vue/src/components/table/CTable'
88

99
#### Props
1010

11-
| Prop name | Description | Type | Values | Default |
12-
| ---------------- | ------------------------------------------------------------------------------------------------------------------------ | --------------- | --------------------------------------------------------------------------------------------------------- | ------- |
13-
| **align** | Set the vertical aligment. | string | `'bottom'`, `'middle'`, `'top'` | - |
14-
| **border-color** | Sets the border color of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | |
15-
| **bordered** | Add borders on all sides of the table and cells. | boolean | - | |
16-
| **borderless** | Remove borders on all sides of the table and cells. | boolean | - | |
17-
| **caption** | Put the `<caption>` on the top of the table. | string | `'top'` | - |
18-
| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `string` | |
19-
| **hover** | Enable a hover state on table rows within a `<CTableBody>`. | boolean | - | |
20-
| **responsive** | Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to. | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'` | - |
21-
| **small** | Make table more compact by cutting all cell `padding` in half. | boolean | - | |
22-
| **striped** | Add zebra-striping to any table row within the `<CTableBody>`. | boolean | - | |
11+
| Prop name | Description | Type | Values | Default |
12+
| ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ | --------------- | --------------------------------------------------------------------------------------------------------- | ------- |
13+
| **align** | Set the vertical aligment. | string | `'bottom'`, `'middle'`, `'top'` | - |
14+
| **border-color** | Sets the border color of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | |
15+
| **bordered** | Add borders on all sides of the table and cells. | boolean | - | |
16+
| **borderless** | Remove borders on all sides of the table and cells. | boolean | - | |
17+
| **caption** | Put the `<caption>` on the top of the table. | string | `'top'` | - |
18+
| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'`, `string` | |
19+
| **hover** | Enable a hover state on table rows within a `<CTableBody>`. | boolean | - | |
20+
| **responsive** | Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to. | boolean\|string | `boolean`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'xxl'` | - |
21+
| **small** | Make table more compact by cutting all cell `padding` in half. | boolean | - | |
22+
| **striped** | Add zebra-striping to any table row within the `<CTableBody>`. | boolean | - | |
23+
| **striped-columns** <br><div class="badge bg-primary">4.4.0+</div> | Add zebra-striping to any table column.false | boolean | - | |

0 commit comments

Comments
 (0)