voilab / voilab-pdf-table

PdfKit wrapper that helps to draw informations in simple tables
MIT License
52 stars 26 forks source link

How to set style (font, header color fill, text color....) #43

Open bso-oo opened 3 years ago

bso-oo commented 3 years ago

`FWDreadsTable // add some plugins (here, a 'fit-to-width' for a column) .addPlugin(new (require('voilab-pdf-table/plugins/fitcolumn'))({ column: 'count' })) // set defaults to your columns .setColumnsDefaults({ headerBorder: ['T','B'], border: ['B'], padding: [5, 5, 5, 5], }) // add table columns .addColumns([ { id: 'count', header: '\nCount', align: 'left', width:70 }, { id: 'sampleName', header: '\nSample Name', align: 'center', width: 90 }, { id: 'sequences', header: '\nSeauences', align: 'center', width: 70 }, { id: 'readLength', header: 'Read\nLength', align: 'center', width: 70 }, { id: 'GC', header: 'GC\nContent', align: 'center', width: 70 }, { id: 'fastQCPlots', header: 'FastQC\nPlots', cache: false, width: 70, link: 'xxxxx', renderer(tb, data, draw) {

                    if (draw) {
                        tb.pdf.fillColor('#2959a8')
                        return data.fastQCPlots;
                    }

            }
        },

]) FWDreadsTable.addBody([ {count: 1, sampleName: '02232129_R1', sequences: 128978, readLength: '22-251', GC: 53, fastQCPlots: 'FASTQC'}, {count: 2, sampleName: '02232129_R2', sequences: 128978, readLength:'22-251', GC: 53, fastQCPlots: 'FASTQC'}, {count: 3, sampleName: '02232129_R3', sequences: 128978, readLength: '22-251', GC: 53, fastQCPlots: 'FASTQC'}, {count: 4, sampleName: '02232129_R4', sequences: 128978, readLength: '22-251', GC: 53, fastQCPlots: 'FASTQC'}, {count: 5, sampleName: '02232129_R5', sequences: 128978, readLength: '22-251', GC: 53, fastQCPlots: 'FASTQC'}, {count: 6, sampleName: '02232129_R6', sequences: 128978, readLength: '22-251', GC: 53, fastQCPlots: 'FASTQC'}, ]);` image

  1. FastQCPlots with the link will have the text truncated.
  2. I wish only the FastQCPlots column was blue.
  3. image I just want the part I drew to be filled with color. (fill header )

tafel commented 3 years ago

Hello, maybe you can try with events:

.onHeaderAdd(tb => {
    // set header color
})
.onHeaderAdded(tb => {
    // reset to standard color
})
bso-oo commented 3 years ago

Hello, maybe you can try with events:

.onHeaderAdd(tb => {
    // set header color
})
.onHeaderAdded(tb => {
    // reset to standard color
})

I'm sorry, but can you tell me the details?

bso-oo commented 3 years ago

Hello, maybe you can try with events:

.onHeaderAdd(tb => {
    // set header color
})
.onHeaderAdded(tb => {
    // reset to standard color
})

I'm sorry, but can you tell me the details?

I want it to be like this. image

bso-oo commented 3 years ago

image

good, I've solved what you told me, but can you solve anything else?

mango-lzp commented 2 years ago

image

good, I've solved what you told me, but can you solve anything else?

Hello, maybe you can try with events:

.onHeaderAdd(tb => {
    // set header color
})
.onHeaderAdded(tb => {
    // reset to standard color
})

I'm sorry, but can you tell me the details?

I want it to be like this. image

had u find the solutions? i want to konw how to set the header background color too.

DynMatrix commented 1 year ago

Any solutions ?

tafel commented 1 year ago

You should be able to set header fill color with headerFill property in your column definition and onCellBackgroundAdd/ed events.

.addColumns([{
  id: 'col',
  header: 'My header',
  headerFill: true // needed so we know we need to fill header cells
}])
.onCellBackgroundAdd(t => t.pdf.fill('#eeeeee')) // set fill color
.onCellBackgroundAdded(t => t.pdf.fill('black')) // reset fill color