10000 feat(tables): add support for sticky columns (#3847) · shashankgaurav17/bootstrap-vue@5b5f2b8 · GitHub
[go: up one dir, main page]
Skip to content

Commit 5b5f2b8

Browse files
tmorehousetmorehouse
authored
feat(tables): add support for sticky columns (bootstrap-vue#3847)
1 parent 9a4fe24 commit 5b5f2b8

File tree

7 files changed

+519
-176
lines changed

7 files changed

+519
-176
lines changed

‎docs/markdown/reference/theming/README.md

Lines changed: 41 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,28 @@
55
66
While BootstrapVue uses Bootstrap's CSS, certain features of BootstrapVue uses custom CSS (i.e.
77
stacked tables, etc). Our custom CSS relies on variables defined the Bootstrap v4.x SCSS. The
8-
`bootstrap-vue.css` is compiled using the default Bootstrap v4.x variables. Using the BootstrapVue
9-
source SCSS, you can have your variable overrides (such as breakpoints, etc) adjust the custom
10-
BootstrapVue css.
8+
`bootstrap-vue/dist/bootstrap-vue.css` is compiled using the default Bootstrap v4.x variables. By
9+
using the BootstrapVue source SCSS, you can have your variable overrides (such as breakpoints, theme
10+
colors, etc) adjust the custom BootstrapVue css generation.
1111

1212
## SASS variable defaults
1313

14-
Every Sass variable in Bootstrap 4 includes the `!default` flag allowing you to override the
15-
variable’s default value in your own Sass without modifying Bootstrap’s source code. Copy and paste
16-
variables as needed, modify their values, and remove the `!default` flag. If a variable has already
17-
been assigned, then it won’t be re-assigned by the default values in Bootstrap.
14+
Every Sass variable in Bootstrap v4 includes the `!default` flag allowing you to override the
15+
variable’s default value in your own Sass without modifying Bootstrap and BootstrapVue's source SCSS
16+
code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a
17+
variable has already been assigned, then it won’t be re-assigned by the default values in Bootstrap
18+
and BootstrapVue.
1819

1920
You will find the complete list of Bootstrap’s variables in `bootstrap/scss/_variables.scss`. Some
2021
variables are set to `null`, these variables don’t output the property unless they are overridden in
2122
your configuration.
2223

2324
Variable overrides within the same Sass file can come before or after the default variables.
24-
However, when overriding across Sass files, your overrides must come _before_ you import Bootstrap’s
25-
Sass files.
25+
However, when overriding across Sass files, your overrides must come _before_ you import Bootstrap
26+
and BootstrapVue's Sass (SCSS) files.
2627

2728
Here’s an example that changes the `background-color` and `color` for the `<body>` when importing
28-
and compiling Bootstrap SCSS:
29+
and compiling Bootstrap and BootstrapVue SCSS:
2930

3031
```scss
3132
// Your variable overrides
@@ -93,20 +94,22 @@ Some commonly used Bootstrap v4 variables are:
9394
| `$enable-validation-icons` | Boolean | `true` | Enables `background-image` icons within textual inputs and some custom forms for validation states |
9495

9596
Refer to [Bootstrap's theming](https://getbootstrap.com/docs/4.3/getting-started/theming/) docs for
96-
additional variable information.
97+
additional Bootstrap v4 variable information.
9798

98-
BootstrapVue also defines several SCSS variables for controlling BootstrapVue's custom CSS
99-
generation:
99+
BootstrapVue also defines several Sass variables for controlling BootstrapVue's custom CSS
100+
generation. If you are not using these features in your project, you can disable the feature's CSS
101+
generation to reduce the size of BootstrapVue's custom CSS bundle:
100102

101-
| Variable | Type | Default | Description |
102-
| ----------------------------- | ------- | ------- | -------------------------------------- |
103-
| `$bv-enable-table-stacked` | Boolean | `true` | Enables stacked table CSS generation |
104-
| `$bv-enable-tooltip-variants` | Boolean | `true` | Enables tooltip variant CSS generation |
105-
| `$bv-enable-popover-variants` | Boolean | `true` | Enables popover variant CSS generation |
103+
| Variable | Type | Default | Description |
104+
| ----------------------------- | ------- | ------- | ----------------------------------------------------- |
105+
| `$bv-enable-table-stacked` | Boolean | `true` | Enables stacked table CSS generation |
106+
| `$bv-enable-table-sticky` | Boolean | `true` | Enables sticky table header and column CSS generation |
107+
| `$bv-enable-tooltip-variants` | Boolean | `true` | Enables tooltip variant CSS generation |
108+
| `$bv-enable-popover-variants` | Boolean | `true` | Enables popover variant CSS generation |
106109

107110
You can find additional variables that control various aspects of BootstrapVue's custom CSS at
108111
[`bootstrap-vue/src/_variables.scss`](https://github.com/bootstrap-vue/bootstrap-vue/blob/master/src/_variables.scss).
109-
BootstrapVue's custom SCSS relies on Bootstrap's SASS variables, functions, and mixins.
112+
Note that BootstrapVue's custom SCSS relies on Bootstrap's SASS variables, functions, and mixins.
110113

111114
## Generating custom themes
112115

@@ -117,23 +120,30 @@ your project, which you can include in your main app:
117120

118121
```html
119122
<style lang="scss">
123+
// Import custom SASS variable overrides
120124
@import 'assets/custom.scss';
125+
// Import Bootstrap and BootstrapVue source SCSS files
121126
@import '~bootstrap/scss/bootstrap.scss';
122127
@import '~bootstrap-vue/src/index.scss';
123128
129+
// General style overrides and custom classes
124130
body {
125131
margin: 0;
126132
}
127133
// ...
128134
</style>
129135
```
130136
137+
The `custom.scss` file, which needs to be loaded before Bootstrap's SCSS and BootstrapVue's SCSS,
138+
will include your Bootstrap v4 variable overrides (i.e. colors, shadows, font sizes, breakpoints,
139+
etc).
140+
131141
**Via app main entry point:**
132142
133-
Create an SCSS file:
143+
Create an SCSS file with your custom theme variables:
134144
135145
```scss
136-
// custom.scss
146+
// File: custom.scss
137147
138148
// Define your variable overrides here
139149
$enable-shadows: true;
@@ -145,10 +155,17 @@ $grid-breakpoints: (
145155
lg: 999px,
146156
xl: 1234px
147157
);
158+
$bv-enable-table-stacked: false;
148159
149160
// Include Bootstrap and BootstrapVue SCSS files
150161
@import '~bootstrap/scss/bootstrap.scss';
151162
@import '~bootstrap-vue/src/index.scss';
163+
164+
// General style overrides and custom classes
165+
body {
166+
margin: 0;
167+
}
168+
// ...
152169
```
153170
154171
Then import that single SCSS file into your app code entry point:
@@ -158,9 +175,7 @@ Then import that single SCSS file into your app code entry point:
158175
import 'custom.scss'
159176
```
160177
161-
The `custom.scss` file, which needs to be loaded before Bootstrap's SCSS, will include your
162-
Bootstrap v4 variable overrides (i.e. colors, shadows, font sizes, breakpoints, etc). You can find
163-
all of the possible variables in `node_modules/bootstrap/scss/_variables.scss`.
178+
You can find all of the possible variables in `node_modules/bootstrap/scss/_variables.scss`.
164179
165180
Do not forget to include `node-sass` and `sass-loader` to use `scss` in Vue:
166181
@@ -221,8 +236,8 @@ Here are the variables that are generated. The values shown are based on the Boo
221236
}
222237
```
223238
224-
By setting SASS variables and maps, and recompiling the SCSS, will update the above generated CSS
225-
variables.
239+
By setting SASS variables and maps, and recompiling the SCSS, the above generated SCSS variables
240+
will also be updated.
226241
227242
### Example
228243

‎src/_variables.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
// BootstrapVue custom SCSS variables
1+
// --- BootstrapVue custom SCSS variables ---
22
//
33
// Users can override these variables in their custom SCSS
44
//
5+
// Variables beginning with `$bv-` are used to enable/disable specific section CSS generation
6+
// Variables beginning with `$b-` are used to control values within the CSS generation
57

68
// --- Custom inputs (adds sizing support) ---
79

@@ -69,6 +71,8 @@ $b-table-sort-icon-descending: "\2191" !default; // Up arrow
6971
$b-table-sort-icon-margin-left: 0.5em !default;
7072
$b-table-sort-icon-width: 0.5em !default;
7173

74+
// Flag to enable sticky table header and column CSS generation
75+
$bv-enable-table-sticky: true !default;
7276
// Default max-height for tables with sticky headers
7377
$b-table-sticky-header-max-height: 300px !default;
7478

0 commit comments

Comments
 (0)
0