Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 25c8902

Browse files
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‎

Lines changed: 10 additions & 0 deletions
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‎

Lines changed: 18 additions & 18 deletions
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‎

Lines changed: 13 additions & 12 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /