Table of contents does not work with tables

[SamirMishra27]

Description:

If I try to add tocItem to a table block, it won't be referenced in the table of contents section.

Steps to recreate

// playground requires you to assign document definition to a variable called dd

var dd = {
    content: [
        // Table of contents
        {
            toc: {
                id: 'table-of-contents',
                title: {
                    text: 'Table of Contents',
                    alignment: 'center',
                    style: 'header',
                    fontSize: 18,
                    color: '#008080',
                    bold: true,
                    marginBottom: 10
                },
            }
        },
        // Table of contents
        {text: 'Tables', style: 'header'},
        'Official documentation is in progress, this document is just a glimpse of what is possible with pdfmake and its layout engine.',
        {text: 'A simple table (no headers, no width specified, no spans, no styling)', style: 'subheader'},
        'The following table has nothing more than a body array',
        {
            style: 'tableExample',
            table: {
                body: [
                    ['Column 1', 'Column 2', 'Column 3'],
                    ['One value goes here', 'Another one here', 'OK?']
                ]
            }
        },
        {text: 'A simple table with nested elements', style: 'subheader'},
        'It is of course possible to nest any other type of nodes available in pdfmake inside table cells',
        {
            tocItem: 'table-of-contents',
            style: 'tableExample',
            table: {
                body: [
                    ['Column 1', 'Column 2', 'Column 3'],
                    [
                        {
                            stack: [
                                'Let\'s try an unordered list',
                                {
                                    ul: [
                                        'item 1',
                                        'item 2'
                                    ]
                                }
                            ]
                        },
                        [
                            'or a nested table',
                            {
                                table: {
                                    body: [
                                        ['Col1', 'Col2', 'Col3'],
                                        ['1', '2', '3'],
                                        ['1', '2', '3']
                                    ]
                                },
                            }
                        ],
                        {text: [
                                'Inlines can be ',
                                {text: 'styled\n', italics: true},
                                {text: 'easily as everywhere else', fontSize: 10}]
                        }
                    ]
                ]
            }
        },
        {text: 'Defining column widths', style: 'subheader'},
        'Tables support the same width definitions as standard columns:',
    styles: {
        header: {
            fontSize: 18,
            bold: true,
            margin: [0, 0, 0, 10]
        },
        subheader: {
            fontSize: 16,
            bold: true,
            margin: [0, 10, 0, 5]
        },
        tableExample: {
            margin: [0, 5, 0, 15]
        },
        tableHeader: {
            bold: true,
            fontSize: 13,
            color: 'black'
        }
    },
    defaultStyle: {
        // alignment: 'justify'
    }

}

Run this minimal example in pdfmake playground.

Node.js version v20.11.0 pdfmake version v0.2.9

[liborm85]

This is logical behavior, because table has no text, but lot of cells with text. tocItem must be placed in text of a cell, example:

var dd = {
    content: [
                {
            toc: {
                id: 'table-of-contents',
                title: {
                    text: 'Table of Contents',
                    alignment: 'center',
                    style: 'header',
                    fontSize: 18,
                    color: '#008080',
                    bold: true,
                    marginBottom: 10
                },
            }
        },
        {
            style: 'tableExample',
            table: {
                body: [
                    [{text:'Column 1', tocItem: 'table-of-contents'}, 'Column 2', 'Column 3'],
                    ['One value goes here', 'Another one here', 'OK?']
                ]
            }
        },
    ]

}

[SamirMishra27]

Thank you for your reply! I didn't know doing this was possible.