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

Bootstrap ~5.3.0 Documentation on Tables

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 attributes
  • header: 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
Varbase Components - Bootstrap ~5.3.0 Table - Storybook

Table - Storybook - Striped rows
Table - Storybook - Striped rows

Table - Storybook - Striped columns
Table - Storybook - Striped columns

Table - Storybook - Small Table
Table - Storybook - Small Table

Table - Storybook - Dark
Table - Storybook - Dark

Table - Storybook - Sticky table header
Table - Storybook - Sticky table header

Auto-Docs - Storybook for Table
Auto-Docs - Storybook for Table

Command icon 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

Ahmad Abbad created an issue. See original summary.

ahmad abbad’s picture

Status: Active » Needs review
rajab natshah’s picture

Title: Fix We found an unexpected slot that is not declared: [table, caption, colgroup, header, body, footer] » Fix Unexpected slot that is not declared: table, caption, colgroup, header, body, footer
rajab natshah’s picture

Status: Needs review » Needs work

Thanks, Ahamd , for reporting and the MR!

The Table component needs more work for sure.

Components has (props and slots)
Better not to have the property item under props and slots
Only in one of them.
also, switched from camel case to snake case naming format and naming convention

rajab natshah’s picture

I understood the same logic at first. But got the idea by then.

Please, have a look at

It's Ok not to have any props
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

rajab natshah’s picture

Assigned: Unassigned » rajab natshah
Status: Needs work » Active
rajab natshah’s picture

Issue summary: View changes

Drupal 10.1.x stable9 template on it table.html.twig
https://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/themes/stab...
and the template_preprocess_table function in the following link
https://git.drupalcode.org/project/drupal/-/blob/10.1.x/core/includes/th...
is sending the following

{#
/**
 * @file
 * Theme override to display a table.
 *
 * Available variables:
 * - attributes: HTML attributes to apply to the <table> tag.
 * - caption: A localized string for the <caption> tag.
 * - colgroups: Column groups. Each group contains the following properties:
 *   - attributes: HTML attributes to apply to the <col> tag.
 *     Note: Drupal currently supports only one table header row, see
 *     https://www.drupal.org/node/893530 and
 *     http://api.drupal.org/api/drupal/includes!theme.inc/function/theme_table/7#comment-5109.
 * - header: Table header cells. Each cell contains the following properties:
 *   - tag: The HTML tag name to use; either 'th' or 'td'.
 *   - attributes: HTML attributes to apply to the tag.
 *   - content: A localized string for the title of the column.
 *   - field: Field name (required for column sorting).
 *   - sort: Default sort order for this column ("asc" or "desc").
 * - sticky: A flag indicating whether to use a "sticky" table header.
 * - rows: Table rows. Each row contains the following properties:
 *   - attributes: HTML attributes to apply to the <tr> tag.
 *   - data: Table cells.
 *   - no_striping: A flag indicating that the row should receive no
 *     'even / odd' styling. Defaults to FALSE.
 *   - cells: Table cells of the row. Each cell contains the following keys:
 *     - tag: The HTML tag name to use; either 'th' or 'td'.
 *     - attributes: Any HTML attributes, such as "colspan", to apply to the
 *       table cell.
 *     - content: The string to display in the table cell.
 *     - active_table_sort: A boolean indicating whether the cell is the 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.
 *
 * @see template_preprocess_table()
 */
#}

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_classes for the table
head_utility_classes for the head of the table

rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes

  • Rajab Natshah committed 11154090 on 2.0.x
    Issue #3375232: Fix Unexpected slot that is not declared: table, caption...
rajab natshah’s picture

Drupal ~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:

  • Striped rows: Use .table-striped to add zebra-striping to any table row within the <tbody>.
  • Striped columns: Use .table-striped-columns to add zebra-striping to any table column.
  • Hoverable rows: Add .table-hover to enable a hover state on table rows within a <tbody>.
  • Bordered tables: Add .table-bordered for borders on all sides of the table and cells.
  • Tables without borders: Add .table-borderless for a table without borders.

and more which are listed in the last comment

  • Rajab Natshah committed f785f4fa on 2.0.x
    Issue #3375232: Fix Unexpected slot that is not declared: table, caption...
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Assigned: Unassigned » mohammed j. razem
Issue summary: View changes
Issue tags: +varbase-10.0.0-beta1, +varbase_components-2.0.0-alpha21
rajab natshah’s picture

Assigned: mohammed j. razem » Unassigned
rajab natshah’s picture

Status: Needs review » Fixed
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes

  • Rajab Natshah committed 53844f50 on 2.0.x
    Issue #3375232: Fix Unexpected slot that is not declared: table, caption...
rajab natshah’s picture

Issue summary: View changes

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.