Ahsan Ullah
Ahsan Ullah

Reputation: 158

How to set the column width automatically in react-data-export?

I am using react-data-export to export data in xlsx. I want the set column with automatically but don't how to do that? https://www.npmjs.com/package/react-data-export

 <ExcelFile filename="reservation-list" element={<img src={ExcelImg} style={{width:'25px',height:'25px',cursor:'pointer'}} />}>
            <ExcelSheet data={allData} name="Employees">
                <ExcelColumn label="Id" value="id" style={{alignment:{horizontal:"center"}}}/>
                <ExcelColumn label="kid Name" value="kidName"/>
                <ExcelColumn label="Gender" value="gender"/>
                <ExcelColumn label="Kid Birthdate" value={(col) => moment(col.kidBirthdate*1000).format("Do MMMM YYYY")}/>
                <ExcelColumn label="Parent Name" value="parentFullName"/>
                <ExcelColumn label="Current Grade" value="currentGrade"/>
                <ExcelColumn label="Next Grade" value="nextGrade"/>
                <ExcelColumn label="Previous School" value="previousSchool"/>
                <ExcelColumn label="Status" value="status"/>
                <ExcelColumn label="Avatar" value="avatar"/>
                <ExcelColumn label="Kid Id" value="kidId"/>
            </ExcelSheet>
  </ExcelFile>

Plus i want to apply alignment horizontal style too but don't know how to provide style attribute to ExcelColumn tag.

Upvotes: 1

Views: 3766

Answers (1)

Sergey
Sergey

Reputation: 176

Use "Excel Export with Dataset", then in style set

alignment: {wrapText: true, horizontal: 'center', vertical: 'top'}.

For example:

[
   columns: [{…}],
   data:[
          [{  
             value: 'Text',
             style: {
                     font: { sz: '12' },
                     alignment: { wrapText: true, horizontal: 'center', vertical: 'top' },
                     border: { bottom: { style: 'thin', color: { rgb: '000000' } } 
                    }
          }]
]

Upvotes: 1

Related Questions