Skip to content

Conversation

brunokunace
Copy link

@brunokunace brunokunace commented Mar 15, 2023

Type

  • Feature

Introduce way to user can set text direction of each header/column separately, with this pr user can use the bodyTextDirection and headerTextDirection for all columns, but can override anyone if needed, like that:

Last Attended have a textAlign: right and Country have a textAlign: center

image

Way to use it:
The user can put in headers configuration the new attribute textAlign for each header.

const headers: Header[] = [ { text: "Name", value: "name" }, { text: "TEAM", value: "team"}, { text: "NUMBER", value: "number", sortable: true}, { text: "POSITION", value: "position"}, { text: "HEIGHT", value: "indicator.height"}, { text: "WEIGHT (lbs)", value: "indicator.weight", sortable: true}, { text: "LAST ATTENDED", value: "lastAttended", width: 200, textAlign: 'right'}, { text: "COUNTRY", value: "country", textAlign: 'center'}, ]; 
@brunokunace
Copy link
Author

Need to update the docs to added this attribute, but idk how to send a pr for docs, because i did not found a repository to make pr's, only the repository to ghpages found

@HC200ok
Copy link
Owner

HC200ok commented Mar 20, 2023

Thank you for your PR, but I think this feature is duplicated with Class name customization feature.

@brunokunace
Copy link
Author

thanks for you reply @HC200ok , for my example above, i need to make:

<EasyDataTable :headers="headers" :items="items" :header-item-class-name="headerItemClassNameFunction" :body-item-class-name="bodyItemClassNameFunction" / > const bodyItemClassNameFunction: BodyItemClassNameFunction = (column: string, rowNumber: number): string => { if (column === 'lastAttended') return 'text-right'; if (column === 'country') return 'text-center'; return ''; }; const headerItemClassNameFunction: HeaderItemClassNameFunction = (header: Header, columnNumber: number): string => { if (column === 'lastAttended') return 'text-right'; if (column === 'country') return 'text-center'; return ''; }; <style> .text-right { align-items: flex-end; } .text-center { align-items: center; } 

It's it? of course i can make a function to return the same class string in both functions... It's a complicated way, but works, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

2 participants