feat: create way to change the text align of each header/column

[brunokunace]

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

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]

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]

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

[brunokunace]

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!