Generating a Custom Consent Table
Relevant source files
The following files were used as context for generating this wiki page:The consent-manager library provides the GrantsInterface module, which includes a method to dynamically generate an HTML table for managing user consent preferences. This allows developers to embed a detailed consent management UI directly into their application, separate from the default modal dialog. The generated table is directly linked to a ConsentManager instance, reflecting the current consent state and updating it based on user interaction.
This feature is ideal for creating custom preference centers or integrating consent controls seamlessly within a settings page. The table is built by iterating over the consent categories defined in the ConsentManager configuration, providing a toggle for each non-required category.
Sources: src/modules/GrantsInterface.ts:125-177, README.md:166-172
Core Functionality
The primary method for this feature is generateConsentTable, a public method of the GrantsInterface class.
Sources: src/modules/GrantsInterface.ts:125
generateConsentTable(autoUpdate = false)
This method constructs and returns an HTMLTableElement that lists all consent categories from the ConsentManager configuration.
Parameters:
| Parameter | Type | Default | Description |
|---|---|---|---|
autoUpdate | boolean | false | If true, the table will listen for update events from ConsentManager and update its state accordingly. |
Sources: src/modules/GrantsInterface.ts:125, README.md:171-172
Generation Logic
The following diagram illustrates the process flow for the generateConsentTable method.
This diagram shows how the generateConsentTable method iterates through consent categories to build the table rows, setting initial states and attaching event listeners for user interaction and optional automatic updates.
Sources: src/modules/GrantsInterface.ts:125-177
Interaction with ConsentManager
The generated table is tightly coupled with the ConsentManager instance provided to the GrantsInterface. This interaction is key to its functionality.
The relationship between GrantsInterface and ConsentManager is that GrantsInterface holds a private reference to a ConsentManager instance.
Data Flow for Updates
When a user interacts with a checkbox in the table, a sequence of events is triggered to update the consent state.
The following sequence diagram shows the user interaction flow.
This sequence demonstrates how a user's click on a checkbox leads to a call to ConsentManager.setGrant, which in turn updates the application's state, persists it to a cookie, and emits an update event that can be used to keep the UI synchronized.
Sources: src/modules/GrantsInterface.ts:153-160, src/modules/ConsentManager.ts:167-186
HTML Structure and Styling
The generateConsentTable method produces a <table> with a specific structure and set of CSS classes, which can be targeted for custom styling.
Generated HTML Elements
The table consists of a <table> element containing one <tr> for each consent category.
| Element/Class | Description | Source File |
|---|---|---|
table.consent-manager--table | The main table container. | src/modules/GrantsInterface.ts:126 |
tr.consent-manager--row | A table row, representing one consent category. | src/modules/GrantsInterface.ts:133 |
td.consent-manager--table-toggle-col | The table cell containing the checkbox. | src/modules/GrantsInterface.ts:139 |
input.consent-manager--table-toggle | The checkbox input for granting or revoking consent. | src/modules/GrantsInterface.ts:140 |
td.consent-manager--table-label-col | The table cell containing the label and description. | src/modules/GrantsInterface.ts:142 |
span.consent-manager--table-label | The element displaying the category's label. | src/modules/GrantsInterface.ts:144, 148 |
sub.consent-manager--table-description | The element displaying the category's description. | src/modules/GrantsInterface.ts:145, 150 |
Default Styles
The src/styles.scss file provides default styling for these elements. For example, the label is bolded and the description is displayed as a block underneath it.
/* src/styles.scss:60-68 */
.consent-manager--table-toggle {
margin: 1rem;
margin-left: 0;
}
.consent-manager--table-label,
.consent-manager--table-description {
display: block;
}
.consent-manager--table-label {
font-weight: bold;
}
Sources: src/styles.scss:60-72
Usage Example
To use this feature, you first instantiate ConsentManager and GrantsInterface. Then, you call generateConsentTable and append the returned element to the DOM.
// From README.md
import ConsentManager, { GrantsInterface } from 'consent-manager';
import 'consent-manager/dist/consent-manager.css';
// 1. Initialize ConsentManager with your configuration
const consentManager = new ConsentManager({
version: '2021-01-01',
categories: [
{ id: 'essential', label: 'Essential', description: '...', required: true },
{ id: 'analytics', label: 'Analytics', description: '...', required: false }
]
});
// 2. Initialize GrantsInterface
const gi = new GrantsInterface(consentManager, { autoShow: false });
// 3. Generate the table and enable auto-updating
const table = gi.generateConsentTable(true);
// 4. Append the table to a container in your document
document.getElementById('consent-settings-container').appendChild(table);
This example demonstrates how to generate a consent table that automatically updates its state when consent changes elsewhere in the application and append it to a specific DOM element.
Sources: README.md:166-172, src/index.ts:4-5