Problem/Motivation
Twig\Error\SyntaxError: An exception has been thrown during the compilation of a template ("We found an unexpected slot that is not declared: [table, caption, colgroup, header, body, footer]. Please declare them in "table.component.yml"."). in Twig\Environment->compileSource() (line 42 of modules/contrib/varbase_components/components/organisms/table/table.twig).
Proposed resolution
- Use the right type of props provided
Drupal
10.1.xstable9 template on ittable.html.twig
https://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/themes/stab...
and thetemplate_preprocess_tablefunction in the following link
https://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/includes/th...
Bootstrap ~5.3.0 Documentation on Tables
- Overview
- Variants
- Accented tables
- Striped rows
- Striped columns
- Hoverable rows
- Active tables
- How do the variants and accented tables work?
- Table borders
- Bordered tables
- Tables without borders
- Small tables
- Table group dividers
- Vertical alignment
- Nesting
- Table head
- Table foot
- Captions
- Responsive tables
- Breakpoint specific
Available properties:
responsive: Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports.color: Table Background Color - Set a background contextual classes to color tables.striped_rows: Use to add zebra-striping to any table row within the`<tbody>`. Works with`no_striping`is false.striped_columns: Use to add zebra-striping to any table column. Works with`no_striping`is false.hover: Enable a hover state on table rows within a`<tbody>`.bordered: Add borders on all sides of the table and cells.border_color: Use the border color utility to change border colors.borderless: Add`.table-borderless`for a table without borders.size: Use sm for small to make any table more compact by cutting all cell padding in half.caption: A localized string for the`<caption>`tag.colgroups: Column groups which contains attributesheader: Table header cells which contains (tag,attributes,content,field,sort)sticky: A flag indicating whether to use a sticky table header. ( set `responsive` to false for sticky to work)rows: Table rows, which each row contains (attributes,data,no_striping,cells). Each cell contains (tag,attributes,content,active_table_sort)footer: Table footer rows, in the same format as the rows variable.empty: The message to display in an extra row if table does not have any rows.no_striping: A boolean indicating that the row should receive no striping.header_columns: The number of columns in the header.utility_classes: An array of utility classes. Use to add extra Bootstrap utility classes or custom CSS classes over to the table element.thead_utility_classes: An array of utility classes. Use to add extra Bootstrap utility classes or custom CSS classes over to the head of the table element.tbody_utility_classes: An array of utility classes. Use to add extra Bootstrap utility classes or custom CSS classes over to the body of the table element.tfoot_utility_classes: An array of utility classes. Use to add extra Bootstrap utility classes or custom CSS classes over to the footer of the table element.
Available attributes:
attributes: HTML attributes to apply to the`<table>`tag.thead_attributes: HTML attributes to apply to the`<thead>`tag.tbody_attributes: HTML attributes to apply to the`<tbody>`tag.tfoot_attributes: HTML attributes to apply to the`<tfoot>`tag.
Available slots:
- N/A
Remaining tasks
- ✅ File an issue about this project
- ✅ Addition/Change/Update/Fix to this project
- ✅ Testing to ensure no regression
- ➖ Automated unit/functional testing coverage
- ➖ Developer Documentation support on feature change/addition
- ➖ User Guide Documentation support on feature change/addition
- ✅ Accessibility and Readability
- ✅ Code review from 1 Varbase core team member
- ✅ Full testing and approval
- ✅ Credit contributors
- ✅ Review with the product owner
- ✅ Update Release Notes and Update Helper on new feature change/addition
- ❌ Release varbase-10.0.0-beta1, varbase_components-2.0.0-alpha21
Varbase update type
- ✅ No Update
- ➖ Optional Update
- ➖ Forced Update
- ➖ Forced Update if Unchanged
User interface changes
- N/A
API changes
- N/A
Data model changes
- N/A
Release notes snippet
- Issue #3375232 by Ahmad Abbad: Fixed Unexpected slot that is not declared: table, caption, colgroup, header, body, footer
Varbase Components - Bootstrap ~5.3.0 Table - Storybook

Table - Storybook - Striped rows

Table - Storybook - Striped columns

Table - Storybook - Small Table

Issue fork varbase_components-3375232
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:



Comments
Comment #3
ahmad abbad commentedComment #4
rajab natshahComment #5
rajab natshahThanks, Ahamd , for reporting and the MR!
The Table component needs more work for sure.
Components has (
propsandslots)Better not to have the property item under
propsandslotsOnly in one of them.
also, switched from camel case to snake case naming format and naming convention
Comment #6
rajab natshahI understood the same logic at first. But got the idea by then.
Please, have a look at
Components without props, with a schema
On your time
More Info and FAQ about SDC
Read: Using Single Directory Components
https://www.drupal.org/docs/develop/theming-drupal/using-single-director...
Read: F.A.Q. (Frequently Asked Questions) about SDC
https://www.drupal.org/docs/develop/theming-drupal/using-single-director...
Read: Creating Your First Single Directory Component within Drupal
https://herchel.com/articles/creating-your-first-single-directory-compon...
Read: Single Directory Components in Drupal Core
https://www.lullabot.com/articles/getting-single-directory-components-dr...
Watch: Single Directory Components in Core: Pittsburgh 2023
https://www.youtube.com/watch?v=gDd7pCK9KsA
Listed that in Varbase Docs 10.0.x
Comment #7
rajab natshahComment #8
rajab natshahDrupal
10.1.xstable9 template on ittable.html.twighttps://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/themes/stab...
and the
template_preprocess_tablefunction in the following linkhttps://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/includes/th...
is sending the following
Following with part work in Bootstrap Barrio
https://git.drupalcode.org/project/bootstrap_barrio/-/blob/5.5.x/bootstr...
But not using any of Barrio's theme settings on table_style , hover, table_head
Having:
utility_classesfor the tablehead_utility_classesfor the head of the tableComment #9
rajab natshahComment #10
rajab natshahComment #11
rajab natshahComment #12
rajab natshahComment #13
rajab natshahComment #14
rajab natshahComment #15
rajab natshahComment #17
rajab natshahComment #18
rajab natshahDrupal ~10.1.0 core has
no_striping: A boolean indicating that the row should receive no striping.But using the same flag in Bootstrap Barrio.
It dose not mean no striping , that the table should be bordered!
Started to follow with the Barrio school on this.
not no_striping ? 'table-striped' : 'table-bordered',https://git.drupalcode.org/project/bootstrap_barrio/-/blob/5.5.x/templat...
But as of Bootstrap ~5.3.0 , it has the following:
.table-stripedto add zebra-striping to any table row within the<tbody>..table-striped-columnsto add zebra-striping to any table column..table-hoverto enable a hover state on table rows within a<tbody>..table-borderedfor borders on all sides of the table and cells..table-borderlessfor a table without borders.and more which are listed in the last comment
Comment #20
rajab natshahComment #21
rajab natshahComment #22
rajab natshahComment #23
rajab natshahComment #24
rajab natshahComment #25
rajab natshahComment #26
rajab natshahComment #27
rajab natshahComment #29
rajab natshahHad the following fixed in Vartheme BS5
#3385359: Fix [caption] NULL value found, but a string or an object is required. This may be because the property is empty instead of having data present. If possible fix the source data, use the |default() twig filter
Comment #30
rajab natshah✅ Released varbase_components-2.0.0-alpha21