Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom table layout not applied if table is in header or footer #2739

Open
kryops opened this issue Jun 26, 2024 · 2 comments
Open

Custom table layout not applied if table is in header or footer #2739

kryops opened this issue Jun 26, 2024 · 2 comments

Comments

@kryops
Copy link

kryops commented Jun 26, 2024

Hi there,

I noticed that custom table layouts do not seem to be applied if the table is in the document header or footer.

Example:

const myTable = {
    table: {
        body: [
            ['A', 'B'],
            ['C', 'D'],
        ]
    },
    layout: {
        paddingTop: () => 0,
        paddingBottom: () => 0,
        paddingLeft: () => 0,
        paddingRight: () => 0,
        hLineWidth: () => 2,
        vLineWidth: () => 2,
        hLineStyle: () => ({ dash: { length: 2 } }),
        vLineStyle: () => ({ dash: { length: 4 } }),
        hLineColor: () => 'green', // works if passed as value
        vLineColor: () => 'red', // works if passed as value
        fillColor: () => 'yellow', // works if passed as value
        fillOpacity: () => 0.5, // works if passed as value
    },
}

var dd = {
	pageSize: 'A8',
	header: myTable,
	content: [myTable],
	footer: myTable,
}

image

Passing a plain value instead of a function works for the properties that support it.

I tested with the following versions:

  • 0.2.10
  • 0.3.0-beta.8

Thanks for looking into it!

@liborm85
Copy link
Collaborator

Header and footer as function is required:

const myTable = {
    table: {
        body: [
            ['A', 'B'],
            ['C', 'D'],
        ]
    },
    layout: {
        paddingTop: () => 0,
        paddingBottom: () => 0,
        paddingLeft: () => 0,
        paddingRight: () => 0,
        hLineWidth: () => 2,
        vLineWidth: () => 2,
        hLineStyle: () => ({ dash: { length: 2 } }),
        vLineStyle: () => ({ dash: { length: 4 } }),
        hLineColor: () => 'green', // works if passed as value
        vLineColor: () => 'red', // works if passed as value
        fillColor: () => 'yellow', // works if passed as value
        fillOpacity: () => 0.5, // works if passed as value
    },
}

var dd = {
	pageSize: 'A8',
	header: function() { return myTable },
	content: [myTable],
	footer: function() { return myTable },
}

@kryops
Copy link
Author

kryops commented Jul 1, 2024

Thanks!
Is this intended behavior? And are there other features that only work in headers/footers when they are defined as a function?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants