diff --git a/src/components/Locale/Default.tsx b/src/components/Locale/Default.tsx index bd33d8fa0..cc4e56aea 100644 --- a/src/components/Locale/Default.tsx +++ b/src/components/Locale/Default.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/en_US'; const typeTemplate = '${label} is not a valid ${type}'; @@ -58,6 +59,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/cs_CZ.tsx b/src/components/Locale/cs_CZ.tsx index bc09a7e56..eab4e3027 100644 --- a/src/components/Locale/cs_CZ.tsx +++ b/src/components/Locale/cs_CZ.tsx @@ -1,10 +1,12 @@ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/cs_CZ'; const localeValues: Locale = { locale: 'cs', global: { placeholder: 'Prosím vyber', }, + Table, }; export default localeValues; diff --git a/src/components/Locale/da_DK.tsx b/src/components/Locale/da_DK.tsx index fa31ee6d7..8de80d9f5 100644 --- a/src/components/Locale/da_DK.tsx +++ b/src/components/Locale/da_DK.tsx @@ -1,7 +1,9 @@ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/da_DK'; const localeValues: Locale = { locale: 'da', + Table, }; export default localeValues; diff --git a/src/components/Locale/de_DE.tsx b/src/components/Locale/de_DE.tsx index 18754aec6..6697512a3 100644 --- a/src/components/Locale/de_DE.tsx +++ b/src/components/Locale/de_DE.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/de_DE'; const typeTemplate = '${label} ist nicht gültig. ${type} erwartet'; @@ -57,6 +58,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/el_GR.tsx b/src/components/Locale/el_GR.tsx index dceceb83d..e0797dfe1 100644 --- a/src/components/Locale/el_GR.tsx +++ b/src/components/Locale/el_GR.tsx @@ -1,7 +1,9 @@ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/el_GR'; const localeValues: Locale = { locale: 'el', + Table, }; export default localeValues; diff --git a/src/components/Locale/en_GB.tsx b/src/components/Locale/en_GB.tsx index b7803a398..669cafb3d 100644 --- a/src/components/Locale/en_GB.tsx +++ b/src/components/Locale/en_GB.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/en_GB'; const typeTemplate = '${label} is not a valid ${type}'; @@ -58,6 +59,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/es_DO.tsx b/src/components/Locale/es_DO.tsx index d4aa97b52..52a44d54d 100644 --- a/src/components/Locale/es_DO.tsx +++ b/src/components/Locale/es_DO.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/es_DO'; const typeTemplate = '${label} no es un ${type} válido'; @@ -58,6 +59,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/es_ES.tsx b/src/components/Locale/es_ES.tsx index e1718a0d1..50649fe91 100644 --- a/src/components/Locale/es_ES.tsx +++ b/src/components/Locale/es_ES.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/es_ES'; const typeTemplate = '${label} no es un ${type} válido'; @@ -58,6 +59,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/es_MX.tsx b/src/components/Locale/es_MX.tsx index 2daacf6cd..2d8184237 100644 --- a/src/components/Locale/es_MX.tsx +++ b/src/components/Locale/es_MX.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/es_MX'; const typeTemplate = '${label} no es un ${type} válido'; @@ -58,6 +59,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/fi_FI.tsx b/src/components/Locale/fi_FI.tsx index 069b28a43..625c95c7b 100644 --- a/src/components/Locale/fi_FI.tsx +++ b/src/components/Locale/fi_FI.tsx @@ -1,7 +1,9 @@ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/fi_FI'; const localeValues: Locale = { locale: 'fi', + Table, }; export default localeValues; diff --git a/src/components/Locale/fr_BE.tsx b/src/components/Locale/fr_BE.tsx index 925fb42c3..6268e82b8 100644 --- a/src/components/Locale/fr_BE.tsx +++ b/src/components/Locale/fr_BE.tsx @@ -1,7 +1,9 @@ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/fr_BE'; const localeValues: Locale = { locale: 'fr', + Table, }; export default localeValues; diff --git a/src/components/Locale/fr_CA.tsx b/src/components/Locale/fr_CA.tsx index 925fb42c3..eb78142ab 100644 --- a/src/components/Locale/fr_CA.tsx +++ b/src/components/Locale/fr_CA.tsx @@ -1,7 +1,9 @@ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/fr_CA'; const localeValues: Locale = { locale: 'fr', + Table, }; export default localeValues; diff --git a/src/components/Locale/fr_FR.tsx b/src/components/Locale/fr_FR.tsx index 02d9d341f..b0fa30bd5 100644 --- a/src/components/Locale/fr_FR.tsx +++ b/src/components/Locale/fr_FR.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/fr_FR'; const typeTemplate = "La valeur du champ ${label} n'est pas valide pour le type ${type}"; @@ -58,6 +59,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/he_IL.tsx b/src/components/Locale/he_IL.tsx index 9701c69fb..55d9b427c 100644 --- a/src/components/Locale/he_IL.tsx +++ b/src/components/Locale/he_IL.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/he_IL'; const typeTemplate = '${label} הוא לא ${type} תקין'; @@ -57,6 +58,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/hr_HR.tsx b/src/components/Locale/hr_HR.tsx index c734c9649..bab62016f 100644 --- a/src/components/Locale/hr_HR.tsx +++ b/src/components/Locale/hr_HR.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/hr_HR'; const typeTemplate = '${label} nije valjan ${type}'; @@ -58,6 +59,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/ht_HT.tsx b/src/components/Locale/ht_HT.tsx index 02d9d341f..adb010cd6 100644 --- a/src/components/Locale/ht_HT.tsx +++ b/src/components/Locale/ht_HT.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/ht_HT'; const typeTemplate = "La valeur du champ ${label} n'est pas valide pour le type ${type}"; @@ -58,6 +59,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/hu_HU.tsx b/src/components/Locale/hu_HU.tsx index d24a0e5e2..ff5471560 100644 --- a/src/components/Locale/hu_HU.tsx +++ b/src/components/Locale/hu_HU.tsx @@ -1,7 +1,9 @@ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/hu_HU'; const localeValues: Locale = { locale: 'hu', + Table, }; export default localeValues; diff --git a/src/components/Locale/it_IT.tsx b/src/components/Locale/it_IT.tsx index b3d889eed..a2d61145f 100644 --- a/src/components/Locale/it_IT.tsx +++ b/src/components/Locale/it_IT.tsx @@ -1,7 +1,9 @@ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/it_IT'; const localeValues: Locale = { locale: 'it', + Table, }; export default localeValues; diff --git a/src/components/Locale/ja_JP.tsx b/src/components/Locale/ja_JP.tsx index e7eb2ea9e..274c562dc 100644 --- a/src/components/Locale/ja_JP.tsx +++ b/src/components/Locale/ja_JP.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/ja_JP'; const typeTemplate = '${label}は有効な${type}ではありません'; @@ -54,6 +55,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/ko_KR.tsx b/src/components/Locale/ko_KR.tsx index 48f4378c7..017f30937 100644 --- a/src/components/Locale/ko_KR.tsx +++ b/src/components/Locale/ko_KR.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/ko_KR'; const typeTemplate = '${label} 유효하지 않은 ${type}'; @@ -54,6 +55,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/ms_MY.tsx b/src/components/Locale/ms_MY.tsx index 53739d849..3f9f49de1 100644 --- a/src/components/Locale/ms_MY.tsx +++ b/src/components/Locale/ms_MY.tsx @@ -1,10 +1,12 @@ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/ms_MY'; const localeValues: Locale = { locale: 'ms-my', global: { placeholder: 'Sila pilih', }, + Table, }; export default localeValues; diff --git a/src/components/Locale/nb_NO.tsx b/src/components/Locale/nb_NO.tsx index 442bf0a2c..3f66e5d63 100644 --- a/src/components/Locale/nb_NO.tsx +++ b/src/components/Locale/nb_NO.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/nb_NO'; const typeTemplate = '${label} er ikke et gyldig ${type}'; @@ -58,6 +59,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/nl_BE.tsx b/src/components/Locale/nl_BE.tsx index 8b661e675..787bb18a5 100644 --- a/src/components/Locale/nl_BE.tsx +++ b/src/components/Locale/nl_BE.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/nl_BE'; const typeTemplate = '${label} is geen geldige ${type}'; @@ -59,6 +60,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/nl_NL.tsx b/src/components/Locale/nl_NL.tsx index de8dba30a..42786807d 100644 --- a/src/components/Locale/nl_NL.tsx +++ b/src/components/Locale/nl_NL.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/nl_NL'; const typeTemplate = '${label} is geen geldige ${type}'; @@ -59,6 +60,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/pl_PL.tsx b/src/components/Locale/pl_PL.tsx index ad487e0a7..0045ed35f 100644 --- a/src/components/Locale/pl_PL.tsx +++ b/src/components/Locale/pl_PL.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/pl_PL'; const typeTemplate = '${label} nie posiada poprawnej wartości dla typu ${type}'; @@ -59,6 +60,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/pt_BR.tsx b/src/components/Locale/pt_BR.tsx index a24fb854c..ed23922d8 100644 --- a/src/components/Locale/pt_BR.tsx +++ b/src/components/Locale/pt_BR.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/pt_BR'; const typeTemplate = '${label} não é um ${type} válido'; @@ -58,6 +59,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/pt_PT.tsx b/src/components/Locale/pt_PT.tsx index a4aeb811b..fa1db44a2 100644 --- a/src/components/Locale/pt_PT.tsx +++ b/src/components/Locale/pt_PT.tsx @@ -1,7 +1,9 @@ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/pt_PT'; const localeValues: Locale = { locale: 'pt', + Table, }; export default localeValues; diff --git a/src/components/Locale/ru_RU.tsx b/src/components/Locale/ru_RU.tsx index 7af8eb822..ba5ed694f 100644 --- a/src/components/Locale/ru_RU.tsx +++ b/src/components/Locale/ru_RU.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/ru_RU'; const typeTemplate: string = '${label} не является типом ${type}'; @@ -56,6 +57,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/sv_SE.tsx b/src/components/Locale/sv_SE.tsx index 17fc0942a..00461bc5d 100644 --- a/src/components/Locale/sv_SE.tsx +++ b/src/components/Locale/sv_SE.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/sv_SE'; const typeTemplate = '${label} är inte en giltig ${type}'; @@ -59,6 +60,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/th_TH.tsx b/src/components/Locale/th_TH.tsx index 086051bb7..a1be2d4b2 100644 --- a/src/components/Locale/th_TH.tsx +++ b/src/components/Locale/th_TH.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/th_TH'; const typeTemplate = '${label} ไม่ใช่ ${type} ที่ถูกต้อง'; @@ -58,6 +59,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/tr_TR.tsx b/src/components/Locale/tr_TR.tsx index ef9df4bcb..d94537223 100644 --- a/src/components/Locale/tr_TR.tsx +++ b/src/components/Locale/tr_TR.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/tr_TR'; const typeTemplate = '${label} geçerli bir ${type} değil'; @@ -58,6 +59,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/uk_UA.tsx b/src/components/Locale/uk_UA.tsx index c1ae956d5..38dc6e5e4 100644 --- a/src/components/Locale/uk_UA.tsx +++ b/src/components/Locale/uk_UA.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/uk_UA'; const typeTemplate = '${label} не є типом ${type}'; @@ -58,6 +59,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/zh_CN.tsx b/src/components/Locale/zh_CN.tsx index 450993c83..3a45c9c60 100644 --- a/src/components/Locale/zh_CN.tsx +++ b/src/components/Locale/zh_CN.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/zh_CN'; const typeTemplate = '${label}不是一个有效的${type}'; @@ -58,6 +59,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/Locale/zh_TW.tsx b/src/components/Locale/zh_TW.tsx index ff3a8653e..4f236b01c 100644 --- a/src/components/Locale/zh_TW.tsx +++ b/src/components/Locale/zh_TW.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-template-curly-in-string */ import type { Locale } from '../LocaleProvider'; +import Table from '../Table/Locale/zh_TW'; const typeTemplate = '${label}不是一個有效的${type}'; @@ -58,6 +59,7 @@ const localeValues: Locale = { }, }, }, + Table, }; export default localeValues; diff --git a/src/components/LocaleProvider/index.tsx b/src/components/LocaleProvider/index.tsx index baf5cc6e6..097c92cbf 100644 --- a/src/components/LocaleProvider/index.tsx +++ b/src/components/LocaleProvider/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import memoizeOne from 'memoize-one'; import type { PickerLocale as DatePickerLocale } from '../DateTimePicker/DatePicker/Generate/Generate.types'; +import type { TableLocale } from '../Table/Table.types'; import type { ValidateMessages } from '../Form/Internal/OcForm.types'; import LocaleContext from './Context'; @@ -13,6 +14,7 @@ export interface Locale { optional?: string; defaultValidateMessages: ValidateMessages; }; + Table?: TableLocale; } export interface LocaleProviderProps { diff --git a/src/components/Table/Internal/Body/BodyRow.tsx b/src/components/Table/Internal/Body/BodyRow.tsx index 30b61f97a..c53299bb7 100644 --- a/src/components/Table/Internal/Body/BodyRow.tsx +++ b/src/components/Table/Internal/Body/BodyRow.tsx @@ -149,6 +149,7 @@ function BodyRow( classNames={columnClassName} ellipsis={column.ellipsis} align={column.align} + verticalAlign={column.verticalAlign} component={cellComponent} key={key} record={record} diff --git a/src/components/Table/Internal/Cell/Cell.types.ts b/src/components/Table/Internal/Cell/Cell.types.ts index 9b2253120..1aab5a60a 100644 --- a/src/components/Table/Internal/Cell/Cell.types.ts +++ b/src/components/Table/Internal/Cell/Cell.types.ts @@ -5,6 +5,7 @@ import type { DefaultRecordType, AlignType, CellEllipsisType, + VerticalAlignType, } from '../OcTable.types'; import type { HoverContextProps } from '../Context/HoverContext'; @@ -35,6 +36,8 @@ export interface InternalCellProps firstFixRight?: boolean; lastFixRight?: boolean; + verticalAlign?: VerticalAlignType; + // ====================== Private Props ====================== /** @private Used for `expandable` with nest tree */ appendNode?: React.ReactNode; diff --git a/src/components/Table/Internal/Cell/index.tsx b/src/components/Table/Internal/Cell/index.tsx index b43ccd207..a47604261 100644 --- a/src/components/Table/Internal/Cell/index.tsx +++ b/src/components/Table/Internal/Cell/index.tsx @@ -84,6 +84,7 @@ function Cell( isSticky, hovering, onHover, + verticalAlign, }: InternalCellProps, ref: React.Ref ): React.ReactElement { @@ -182,10 +183,17 @@ function Cell( // ====================== Align ======================= const alignStyle: React.CSSProperties = {}; + if (align) { alignStyle.textAlign = align; } + const verticalAlignStyle: React.CSSProperties = {}; + + if (verticalAlign) { + verticalAlignStyle.verticalAlign = verticalAlign; + } + // ====================== Hover ======================= const onMouseEnter: React.MouseEventHandler = ( event @@ -244,6 +252,7 @@ function Cell( style: { ...additionalProps.style, ...alignStyle, + ...verticalAlignStyle, ...fixedStyle, ...cellStyle, }, diff --git a/src/components/Table/Internal/Footer/Cell.tsx b/src/components/Table/Internal/Footer/Cell.tsx index c4fd86fe3..6c72fb035 100644 --- a/src/components/Table/Internal/Footer/Cell.tsx +++ b/src/components/Table/Internal/Footer/Cell.tsx @@ -12,6 +12,7 @@ export default function SummaryCell({ colSpan = 1, rowSpan, align, + verticalAlign, }: SummaryCellProps) { const { direction } = useContext(TableContext); const { scrollColumnIndex, stickyOffsets, flattenColumns } = @@ -36,6 +37,7 @@ export default function SummaryCell({ record={null} dataIndex={null} align={align} + verticalAlign={verticalAlign} colSpan={mergedColSpan} rowSpan={rowSpan} render={() => children} diff --git a/src/components/Table/Internal/Footer/Footer.types.ts b/src/components/Table/Internal/Footer/Footer.types.ts index cefd993d6..956fadb81 100644 --- a/src/components/Table/Internal/Footer/Footer.types.ts +++ b/src/components/Table/Internal/Footer/Footer.types.ts @@ -1,4 +1,9 @@ -import type { AlignType, ColumnType, StickyOffsets } from '../OcTable.types'; +import type { + AlignType, + ColumnType, + StickyOffsets, + VerticalAlignType, +} from '../OcTable.types'; export type FlattenColumns = readonly (ColumnType & { scrollbar?: boolean; @@ -11,6 +16,7 @@ export interface SummaryCellProps { colSpan?: number; rowSpan?: number; align?: AlignType; + verticalAlign?: VerticalAlignType; } export interface SummaryProps { diff --git a/src/components/Table/Internal/Header/HeaderRow.tsx b/src/components/Table/Internal/Header/HeaderRow.tsx index a7ecd9e81..9bb86a32f 100644 --- a/src/components/Table/Internal/Header/HeaderRow.tsx +++ b/src/components/Table/Internal/Header/HeaderRow.tsx @@ -52,6 +52,7 @@ function HeaderRow({ classNames={mergeClasses([cell.classNames, classNames])} ellipsis={column.ellipsis} align={column.align} + verticalAlign={column.verticalAlign} component={CellComponent} key={columnsKey[cellIndex]} {...fixedInfo} diff --git a/src/components/Table/Internal/OcTable.tsx b/src/components/Table/Internal/OcTable.tsx index 56d18a9b0..dfd2f2c79 100644 --- a/src/components/Table/Internal/OcTable.tsx +++ b/src/components/Table/Internal/OcTable.tsx @@ -835,7 +835,7 @@ OcTable.Summary = FooterComponents; OcTable.defaultProps = { rowKey: 'key', - emptyText: () => 'Nothing to see here.', + emptyText: () => 'No data found', }; export default OcTable; diff --git a/src/components/Table/Internal/OcTable.types.ts b/src/components/Table/Internal/OcTable.types.ts index 056eb3095..51d08ef0f 100644 --- a/src/components/Table/Internal/OcTable.types.ts +++ b/src/components/Table/Internal/OcTable.types.ts @@ -8,6 +8,75 @@ export type DefaultRecordType = Record; export type TableLayout = 'auto' | 'fixed'; +export type Locale = { + /** + * The Table locale. + */ + locale: string; + /** + * The Table filter `OK` string. + */ + filterConfirmText?: string; + /** + * The Table filter `Reset` string. + */ + filterResetText?: string; + /** + * The Table filter `No filters` string. + */ + filterEmptyText?: string; + /** + * The Table filter `Select all items` string. + */ + filterCheckallText?: string; + /** + * The Table filter `Search in filters` string. + */ + filterSearchPlaceholderText?: string; + /** + * The empty Table `No data found` string. + */ + emptyText?: string; + /** + * The empty Table details string. + * This is not localized as its specific to your scenario. + * Must be passed via props. + */ + emptyTextDetails?: string; + /** + * The Table `Clear all data` string. + */ + selectNoneText?: string; + /** + * The Table `Invert current page` string. + */ + selectInvertText?: string; + /** + * The Table `Select all data` string. + */ + selectionAllText?: string; + /** + * The Table `Expand row` string. + */ + expandText?: string; + /** + * The Table `Collapse row` string. + */ + collapseText?: string; + /** + * The Table `Click to sort descending` string. + */ + triggerDescText?: string; + /** + * The Table `Click to sort ascending` string. + */ + triggerAscText?: string; + /** + * The Table `Click to cancel sorting` string. + */ + cancelSortText?: string; +}; + // ==================== Row ===================== export type RowClassName = ( record: RecordType, @@ -42,7 +111,7 @@ export type CellEllipsisType = { showTitle?: boolean } | boolean; interface ColumnSharedType { /** - * Set the Table Column alignment. + * Set the Table Column text alignment. * @default 'left' */ align?: AlignType; @@ -73,6 +142,10 @@ interface ColumnSharedType { * The Column title. */ title?: React.ReactNode; + /** + * Set the Table Column vertical alignment. + */ + verticalAlign?: VerticalAlignType; } export interface ColumnGroupType @@ -80,7 +153,25 @@ export interface ColumnGroupType children: ColumnsType; } -export type AlignType = 'left' | 'center' | 'right'; +export type AlignType = + | 'start' + | 'end' + | 'left' + | 'right' + | 'center' + | 'justify' + | 'match-parent'; + +export type VerticalAlignType = + | 'baseline' + | 'bottom' + | 'middle' + | 'sub' + | 'super' + | 'text-bottom' + | 'text-top' + | 'top' + | string; export interface ColumnType extends ColumnSharedType { /** @@ -349,6 +440,10 @@ export interface OcTableProps { * Indent size in pixels of Table tree data. */ indentSize?: number; + /** + * Localization configuration. + */ + locale?: Locale; /** * Set props on header row. */ diff --git a/src/components/Table/Internal/Tests/Table.test.js b/src/components/Table/Internal/Tests/Table.test.js index d26f9f66e..757b7d364 100644 --- a/src/components/Table/Internal/Tests/Table.test.js +++ b/src/components/Table/Internal/Tests/Table.test.js @@ -728,6 +728,55 @@ describe('Table.Basic', () => { }); }); + it('verticalAlign column', () => { + const columns = [ + { title: 'Name', dataIndex: 'name', key: 'name' }, + { + title: 'Age', + dataIndex: 'age', + key: 'age', + verticalAlign: 'top', + }, + ]; + const wrapper = mount(createTable({ columns })); + expect( + wrapper.find('th').at(0).props().style.verticalAlign + ).toBeFalsy(); + expect(wrapper.find('th').at(1).props().style.verticalAlign).toEqual( + 'top' + ); + expect( + wrapper.find('tbody tr').first().find('td').at(0).props().style + .verticalAlign + ).toBeFalsy(); + expect( + wrapper.find('tbody tr').first().find('td').at(1).props().style + .verticalAlign + ).toEqual('top'); + }); + + it('verticalAlign column should not override cell style', () => { + const columns = [ + { + title: 'Age', + dataIndex: 'age', + key: 'age', + verticalAlign: 'top', + onCell: () => ({ style: { color: 'red' } }), + onHeaderCell: () => ({ style: { color: 'green' } }), + }, + ]; + const wrapper = mount(createTable({ columns })); + expect(wrapper.find('th').first().props().style).toEqual({ + color: 'green', + verticalAlign: 'top', + }); + expect(wrapper.find('td').first().props().style).toEqual({ + color: 'red', + verticalAlign: 'top', + }); + }); + describe('row events', () => { let spy; diff --git a/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithoutdata.shot b/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithoutdata.shot index f07be8a50..d8905d898 100644 --- a/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithoutdata.shot +++ b/src/components/Table/Internal/Tests/__snapshots__/FixedColumn.renderwithoutdata.shot @@ -866,7 +866,7 @@ LoadedCheerio { }, "children": Array [ Node { - "data": "Nothing to see here.", + "data": "No data found", "next": null, "parent": [Circular], "prev": null, @@ -950,7 +950,7 @@ LoadedCheerio { }, "children": Array [ Node { - "data": "Nothing to see here.", + "data": "No data found", "next": null, "parent": [Circular], "prev": null, @@ -2154,7 +2154,7 @@ LoadedCheerio { }, "children": Array [ Node { - "data": "Nothing to see here.", + "data": "No data found", "next": null, "parent": [Circular], "prev": null, @@ -2238,7 +2238,7 @@ LoadedCheerio { }, "children": Array [ Node { - "data": "Nothing to see here.", + "data": "No data found", "next": null, "parent": [Circular], "prev": null, @@ -3319,7 +3319,7 @@ LoadedCheerio { }, "children": Array [ Node { - "data": "Nothing to see here.", + "data": "No data found", "next": null, "parent": [Circular], "prev": null, @@ -3403,7 +3403,7 @@ LoadedCheerio { }, "children": Array [ Node { - "data": "Nothing to see here.", + "data": "No data found", "next": null, "parent": [Circular], "prev": null, @@ -5676,7 +5676,7 @@ LoadedCheerio { }, "children": Array [ Node { - "data": "Nothing to see here.", + "data": "No data found", "next": null, "parent": [Circular], "prev": null, @@ -5760,7 +5760,7 @@ LoadedCheerio { }, "children": Array [ Node { - "data": "Nothing to see here.", + "data": "No data found", "next": null, "parent": [Circular], "prev": null, @@ -6687,7 +6687,7 @@ LoadedCheerio { }, "children": Array [ Node { - "data": "Nothing to see here.", + "data": "No data found", "next": null, "parent": [Circular], "prev": null, @@ -6771,7 +6771,7 @@ LoadedCheerio { }, "children": Array [ Node { - "data": "Nothing to see here.", + "data": "No data found", "next": null, "parent": [Circular], "prev": null, @@ -8039,7 +8039,7 @@ LoadedCheerio { }, "children": Array [ Node { - "data": "Nothing to see here.", + "data": "No data found", "next": null, "parent": [Circular], "prev": null, @@ -8123,7 +8123,7 @@ LoadedCheerio { }, "children": Array [ Node { - "data": "Nothing to see here.", + "data": "No data found", "next": null, "parent": [Circular], "prev": null, @@ -9050,7 +9050,7 @@ LoadedCheerio { }, "children": Array [ Node { - "data": "Nothing to see here.", + "data": "No data found", "next": null, "parent": [Circular], "prev": null, @@ -9134,7 +9134,7 @@ LoadedCheerio { }, "children": Array [ Node { - "data": "Nothing to see here.", + "data": "No data found", "next": null, "parent": [Circular], "prev": null, diff --git a/src/components/Table/Internal/Tests/__snapshots__/Table.sugar.shot b/src/components/Table/Internal/Tests/__snapshots__/Table.sugar.shot index 7650190e1..a3e798b5a 100644 --- a/src/components/Table/Internal/Tests/__snapshots__/Table.sugar.shot +++ b/src/components/Table/Internal/Tests/__snapshots__/Table.sugar.shot @@ -205,7 +205,7 @@ LoadedCheerio { }, "children": Array [ Node { - "data": "Nothing to see here.", + "data": "No data found", "next": null, "parent": [Circular], "prev": null, @@ -447,7 +447,7 @@ LoadedCheerio { }, "children": Array [ Node { - "data": "Nothing to see here.", + "data": "No data found", "next": null, "parent": [Circular], "prev": null, @@ -532,7 +532,7 @@ LoadedCheerio { }, "children": Array [ Node { - "data": "Nothing to see here.", + "data": "No data found", "next": null, "parent": [Circular], "prev": null, diff --git a/src/components/Table/Locale/cs_CZ.tsx b/src/components/Table/Locale/cs_CZ.tsx new file mode 100644 index 000000000..9d25f1f6d --- /dev/null +++ b/src/components/Table/Locale/cs_CZ.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'cs_CZ', + filterConfirmText: 'Potvrdit', + filterResetText: 'Obnovit', + filterEmptyText: 'Žádné filtry', + filterCheckallText: 'Vybrat všechny položky', + filterSearchPlaceholderText: 'Vyhledávání ve filtrech', + emptyText: 'Nebyly nalezeny žádné údaje', + selectInvertText: 'Invertovat výběr na současné stránce', + selectNoneText: 'Vymazat všechna data', + selectionAllText: 'Vybrat všechny řádky', + expandText: 'Rozbalit řádek', + collapseText: 'Zabalit řádek', + triggerDescText: 'Klikni pro sestupné řazení', + triggerAscText: 'Klikni pro vzestupné řazení', + cancelSortText: 'Klikni pro zrušení řazení', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/da_DK.tsx b/src/components/Table/Locale/da_DK.tsx new file mode 100644 index 000000000..21aa7216a --- /dev/null +++ b/src/components/Table/Locale/da_DK.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'da_DK', + filterConfirmText: 'OK', + filterResetText: 'Nulstil', + filterEmptyText: 'Ingen filtre', + filterCheckallText: 'Vælg alle elementer', + filterSearchPlaceholderText: 'Søg i filtre', + emptyText: 'Ingen data', + selectInvertText: 'Invertér valg', + selectNoneText: 'Ryd alt data', + selectionAllText: 'Vælg alt data', + expandText: 'Udvid række', + collapseText: 'Flet række', + triggerDescText: 'Klik for at sortere faldende', + triggerAscText: 'Klik for at sortere stigende', + cancelSortText: 'Klik for at annullere sortering', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/de_DE.tsx b/src/components/Table/Locale/de_DE.tsx new file mode 100644 index 000000000..a07b5a46d --- /dev/null +++ b/src/components/Table/Locale/de_DE.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'de_DE', + filterConfirmText: 'OK', + filterResetText: 'Zurücksetzen', + filterEmptyText: 'Keine Filter', + filterCheckallText: 'Alle Elemente auswählen', + filterSearchPlaceholderText: 'Suche in Filtern', + emptyText: 'Keine Daten', + selectInvertText: 'Selektion Invertieren', + selectNoneText: 'Löschen Sie alle Daten', + selectionAllText: 'Wählen Sie alle Daten aus', + expandText: 'Zeile erweitern', + collapseText: 'Zeile reduzieren', + triggerDescText: 'Klicken zur absteigenden Sortierung', + triggerAscText: 'Klicken zur aufsteigenden Sortierung', + cancelSortText: 'Klicken zum Abbrechen der Sortierung', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/el_GR.tsx b/src/components/Table/Locale/el_GR.tsx new file mode 100644 index 000000000..2ba270a1d --- /dev/null +++ b/src/components/Table/Locale/el_GR.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'el_GR', + filterConfirmText: 'OK', + filterResetText: 'Επαναφορά', + filterEmptyText: 'Χωρίς φίλτρα', + filterCheckallText: 'Επιλογή όλων των στοιχείων', + filterSearchPlaceholderText: 'Αναζήτηση σε φίλτρα', + emptyText: 'Δεν υπάρχουν δεδομένα', + selectInvertText: 'Αντιστροφή τρέχουσας σελίδας', + selectNoneText: 'Διαγραφή όλων των δεδομένων', + selectionAllText: 'Επιλογή όλων των δεδομένων', + expandText: 'Ανάπτυξη γραμμής', + collapseText: 'Σύμπτυξη γραμμής', + triggerDescText: 'Κάντε κλικ για να ταξινομήσετε φθίνουσα', + triggerAscText: 'Κάντε κλικ για αύξουσα ταξινόμηση', + cancelSortText: 'Κάντε κλικ για να ακυρώσετε την ταξινόμηση', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/en_GB.tsx b/src/components/Table/Locale/en_GB.tsx new file mode 100644 index 000000000..ece5f027b --- /dev/null +++ b/src/components/Table/Locale/en_GB.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'en_GB', + filterConfirmText: 'OK', + filterResetText: 'Reset', + filterEmptyText: 'No filters', + filterCheckallText: 'Select all items', + filterSearchPlaceholderText: 'Search in filters', + emptyText: 'No data found', + selectInvertText: 'Invert current page', + selectNoneText: 'Clear all data', + selectionAllText: 'Select all data', + expandText: 'Expand row', + collapseText: 'Collapse row', + triggerDescText: 'Click to sort descending', + triggerAscText: 'Click to sort ascending', + cancelSortText: 'Click to cancel sorting', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/en_US.tsx b/src/components/Table/Locale/en_US.tsx new file mode 100644 index 000000000..a56b9af00 --- /dev/null +++ b/src/components/Table/Locale/en_US.tsx @@ -0,0 +1,24 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'en_US', + filterConfirmText: 'OK', + filterResetText: 'Reset', + filterEmptyText: 'No filters', + filterCheckallText: 'Select all items', + filterSearchPlaceholderText: 'Search in filters', + emptyText: 'No data found', + emptyTextDetails: '', + selectInvertText: 'Invert current page', + selectNoneText: 'Clear all data', + selectionAllText: 'Select all data', + expandText: 'Expand row', + collapseText: 'Collapse row', + triggerDescText: 'Click to sort descending', + triggerAscText: 'Click to sort ascending', + cancelSortText: 'Click to cancel sorting', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/es_DO.tsx b/src/components/Table/Locale/es_DO.tsx new file mode 100644 index 000000000..86b8e0fc4 --- /dev/null +++ b/src/components/Table/Locale/es_DO.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'es_DO', + filterConfirmText: 'Aceptar', + filterResetText: 'Reiniciar', + filterEmptyText: 'Sin filtros', + filterCheckallText: 'Seleccionar todo', + filterSearchPlaceholderText: 'Buscar en filtros', + emptyText: 'Sin datos', + selectInvertText: 'Invertir selección', + selectNoneText: 'Vacíe todo', + selectionAllText: 'Seleccionar todos los datos', + expandText: 'Expandir fila', + collapseText: 'Colapsar fila', + triggerDescText: 'Click para ordenar en orden descendente', + triggerAscText: 'Click para ordenar en orden ascendente', + cancelSortText: 'Click para cancelar ordenamiento', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/es_ES.tsx b/src/components/Table/Locale/es_ES.tsx new file mode 100644 index 000000000..e24c36ec6 --- /dev/null +++ b/src/components/Table/Locale/es_ES.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'es_ES', + filterConfirmText: 'Aceptar', + filterResetText: 'Reiniciar', + filterEmptyText: 'Sin filtros', + filterCheckallText: 'Seleccionar todo', + filterSearchPlaceholderText: 'Buscar en filtros', + emptyText: 'Sin datos', + selectInvertText: 'Invertir selección', + selectNoneText: 'Vacíe todo', + selectionAllText: 'Seleccionar todos los datos', + expandText: 'Expandir fila', + collapseText: 'Colapsar fila', + triggerDescText: 'Click para ordenar en orden descendente', + triggerAscText: 'Click para ordenar en orden ascendente', + cancelSortText: 'Click para cancelar ordenamiento', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/es_MX.tsx b/src/components/Table/Locale/es_MX.tsx new file mode 100644 index 000000000..eff62409d --- /dev/null +++ b/src/components/Table/Locale/es_MX.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'es_MX', + filterConfirmText: 'Aceptar', + filterResetText: 'Reiniciar', + filterEmptyText: 'Sin filtros', + filterCheckallText: 'Seleccionar todo', + filterSearchPlaceholderText: 'Buscar en filtros', + emptyText: 'Sin datos', + selectInvertText: 'Invertir selección', + selectNoneText: 'Vacíe todo', + selectionAllText: 'Seleccionar todos los datos', + expandText: 'Expandir fila', + collapseText: 'Colapsar fila', + triggerDescText: 'Click para ordenar en orden descendente', + triggerAscText: 'Click para ordenar en orden ascendente', + cancelSortText: 'Click para cancelar ordenamiento', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/fi_FI.tsx b/src/components/Table/Locale/fi_FI.tsx new file mode 100644 index 000000000..c381c16db --- /dev/null +++ b/src/components/Table/Locale/fi_FI.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'fi_FI', + filterConfirmText: 'Okei', + filterResetText: 'Tyhjennä', + filterEmptyText: 'Ei suodattimia', + filterCheckallText: 'Valitse kaikki kohteet', + filterSearchPlaceholderText: 'Etsi suodattimista', + emptyText: 'Ei tietoja', + selectInvertText: 'Valitse päinvastoin', + selectNoneText: 'Tyhjennä kaikki tiedot', + selectionAllText: 'Valitse kaikki tiedot', + expandText: 'Laajenna rivi', + collapseText: 'Kutista rivi', + triggerDescText: 'Lajittele laskevasti', + triggerAscText: 'Lajittele nousevasti', + cancelSortText: 'Peruuta lajittelu', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/fr_BE.tsx b/src/components/Table/Locale/fr_BE.tsx new file mode 100644 index 000000000..4f0b10a4c --- /dev/null +++ b/src/components/Table/Locale/fr_BE.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'fr_BE', + filterConfirmText: 'OK', + filterResetText: 'Réinitialiser', + filterEmptyText: 'Aucun filtre', + filterCheckallText: 'Sélectionner tous les éléments', + filterSearchPlaceholderText: 'Rechercher dans les filtres', + emptyText: 'Aucune donnée', + selectInvertText: 'Inverser la sélection de la page actuelle', + selectNoneText: 'Désélectionner toutes les données', + selectionAllText: 'Sélectionner toutes les données', + expandText: 'Développer la ligne', + collapseText: 'Réduire la ligne', + triggerDescText: 'Trier par ordre décroissant', + triggerAscText: 'Trier par ordre croissant', + cancelSortText: 'Annuler le tri', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/fr_CA.tsx b/src/components/Table/Locale/fr_CA.tsx new file mode 100644 index 000000000..10aae1b1d --- /dev/null +++ b/src/components/Table/Locale/fr_CA.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'fr_CA', + filterConfirmText: 'OK', + filterResetText: 'Réinitialiser', + filterEmptyText: 'Aucun filtre', + filterCheckallText: 'Sélectionner tous les éléments', + filterSearchPlaceholderText: 'Rechercher dans les filtres', + emptyText: 'Aucune donnée', + selectInvertText: 'Inverser la sélection de la page actuelle', + selectNoneText: 'Désélectionner toutes les données', + selectionAllText: 'Sélectionner toutes les données', + expandText: 'Développer la ligne', + collapseText: 'Réduire la ligne', + triggerDescText: 'Trier par ordre décroissant', + triggerAscText: 'Trier par ordre croissant', + cancelSortText: 'Annuler le tri', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/fr_FR.tsx b/src/components/Table/Locale/fr_FR.tsx new file mode 100644 index 000000000..727dab2fd --- /dev/null +++ b/src/components/Table/Locale/fr_FR.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'fr_FR', + filterConfirmText: 'OK', + filterResetText: 'Réinitialiser', + filterEmptyText: 'Aucun filtre', + filterCheckallText: 'Sélectionner tous les éléments', + filterSearchPlaceholderText: 'Rechercher dans les filtres', + emptyText: 'Aucune donnée', + selectInvertText: 'Inverser la sélection de la page actuelle', + selectNoneText: 'Désélectionner toutes les données', + selectionAllText: 'Sélectionner toutes les données', + expandText: 'Développer la ligne', + collapseText: 'Réduire la ligne', + triggerDescText: 'Trier par ordre décroissant', + triggerAscText: 'Trier par ordre croissant', + cancelSortText: 'Annuler le tri', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/he_IL.tsx b/src/components/Table/Locale/he_IL.tsx new file mode 100644 index 000000000..e621b9505 --- /dev/null +++ b/src/components/Table/Locale/he_IL.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'he_IL', + filterConfirmText: 'אישור', + filterResetText: 'איפוס', + filterEmptyText: 'ללא מסננים', + filterCheckallText: 'בחירת כל הפריטים', + filterSearchPlaceholderText: 'חיפוש במסננים', + emptyText: 'אין נתונים', + selectInvertText: 'הפוך בחירה', + selectNoneText: 'נקה את כל הנתונים', + selectionAllText: 'בחר את כל הנתונים', + expandText: 'הרחב שורה', + collapseText: 'צמצם שורהw', + triggerDescText: 'לחץ על מיון לפי סדר יורד', + triggerAscText: 'לחץ על מיון לפי סדר עולה', + cancelSortText: 'לחץ כדי לבטל את המיון', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/hr_HR.tsx b/src/components/Table/Locale/hr_HR.tsx new file mode 100644 index 000000000..01c05a125 --- /dev/null +++ b/src/components/Table/Locale/hr_HR.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'hr_HR', + filterConfirmText: 'OK', + filterResetText: 'Brisanje', + filterEmptyText: 'Nema filtera', + filterCheckallText: 'Odabir svih stavki', + filterSearchPlaceholderText: 'Pretraživanje u filtrima', + emptyText: 'Nema podataka', + selectInvertText: 'Invertiraj trenutnu stranicu', + selectNoneText: 'Očisti sve podatke', + selectionAllText: 'Odaberite sve podatke', + expandText: 'Proširi redak', + collapseText: 'Sažmi redak', + triggerDescText: 'Kliknite za sortiranje silazno', + triggerAscText: 'Kliknite za sortiranje uzlazno', + cancelSortText: 'Kliknite da biste otkazali sortiranje', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/ht_HT.tsx b/src/components/Table/Locale/ht_HT.tsx new file mode 100644 index 000000000..a2774a9b7 --- /dev/null +++ b/src/components/Table/Locale/ht_HT.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'ht_HT', + filterConfirmText: 'Oke', + filterResetText: 'Reyaji', + filterEmptyText: 'Pa gen filtè', + filterCheckallText: 'Chwazi tout atik yo', + filterSearchPlaceholderText: 'Rechèch nan filtè', + emptyText: 'Pa gen done', + selectInvertText: 'Invert paj aktyèl', + selectNoneText: 'Klè tout done', + selectionAllText: 'Chwazi tout done', + expandText: 'etann ranje', + collapseText: 'ranje tonbo', + triggerDescText: 'Klike sou sòt desandans', + triggerAscText: 'Klike sou sòt de asanblaj', + cancelSortText: 'Klike sou anile klasman', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/hu_HU.tsx b/src/components/Table/Locale/hu_HU.tsx new file mode 100644 index 000000000..f2a8a094d --- /dev/null +++ b/src/components/Table/Locale/hu_HU.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'hu_HU', + filterConfirmText: 'OK', + filterResetText: 'Visszaállítás', + filterEmptyText: 'Nincs szűrő', + filterCheckallText: 'Az összes elem kijelölése', + filterSearchPlaceholderText: 'Keresés szűrőkben', + emptyText: 'Nem található adat', + selectInvertText: 'Aktuális oldal megfordítása', + selectNoneText: 'Minden adat törlése', + selectionAllText: 'Az összes adat kijelölése', + expandText: 'Sor kibontása', + collapseText: 'Sor összecsukása', + triggerDescText: 'Kattintson a csökkenő rendezéshez', + triggerAscText: 'Kattintson a növekvő rendezéshez', + cancelSortText: 'Kattintson a rendezés megszakításához', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/it_IT.tsx b/src/components/Table/Locale/it_IT.tsx new file mode 100644 index 000000000..364d258aa --- /dev/null +++ b/src/components/Table/Locale/it_IT.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'it_IT', + filterConfirmText: 'OK', + filterResetText: 'Resettare', + filterEmptyText: 'Nessun filtro', + filterCheckallText: 'Seleziona tutti gli elementi', + filterSearchPlaceholderText: 'Cerca nei filtri', + emptyText: 'Nessun dato trovato', + selectInvertText: 'Inverti pagina corrente', + selectNoneText: 'Cancella tutti i dati', + selectionAllText: 'Seleziona tutti i dati', + expandText: 'Espandi riga', + collapseText: 'Comprimi riga', + triggerDescText: 'Clicca per ordinare decrescente', + triggerAscText: 'Clicca per ordinare in ordine crescente', + cancelSortText: "Fare clic per annullare l'ordinamento", + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/ja_JP.tsx b/src/components/Table/Locale/ja_JP.tsx new file mode 100644 index 000000000..84f697b5f --- /dev/null +++ b/src/components/Table/Locale/ja_JP.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'ja_JP', + filterConfirmText: 'OK', + filterResetText: 'リセット', + filterEmptyText: 'フィルターなし', + filterCheckallText: 'すべてのアイテムを選択', + filterSearchPlaceholderText: 'フィルターでの検索', + emptyText: 'データなし', + selectInvertText: 'ページ単位で反転', + selectNoneText: 'すべてのデータをクリアする', + selectionAllText: 'すべてを選択', + expandText: '展開する', + collapseText: '折り畳む', + triggerDescText: 'クリックで降順にソート', + triggerAscText: 'クリックで昇順にソート', + cancelSortText: 'ソートをキャンセル', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/ko_KR.tsx b/src/components/Table/Locale/ko_KR.tsx new file mode 100644 index 000000000..50467689a --- /dev/null +++ b/src/components/Table/Locale/ko_KR.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'ko_KR', + filterConfirmText: '확인', + filterResetText: '초기화', + filterEmptyText: '필터 없음', + filterCheckallText: '모든 항목 선택', + filterSearchPlaceholderText: '필터에서 검색', + emptyText: '데이터 없음', + selectInvertText: '선택 반전', + selectNoneText: '모든 데이터 지우기', + selectionAllText: '모든 데이터 선택', + expandText: '행 확장', + collapseText: '행 축소', + triggerDescText: '내림차순을 클릭하여 정렬합니다.', + triggerAscText: '오름차순을 정렬하려면 클릭하십시오.', + cancelSortText: '정렬을 취소하려면 클릭하십시오.', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/ms_MY.tsx b/src/components/Table/Locale/ms_MY.tsx new file mode 100644 index 000000000..de74ee76b --- /dev/null +++ b/src/components/Table/Locale/ms_MY.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'ms_MY', + filterConfirmText: 'OK', + filterResetText: 'Set semula', + filterEmptyText: 'Tiada penapis', + filterCheckallText: 'Pilih semua item', + filterSearchPlaceholderText: 'Cari dalam penapis', + emptyText: 'Tiada data ditemui', + selectInvertText: 'Terbalikkan halaman semasa', + selectNoneText: 'Kosongkan semua data', + selectionAllText: 'Pilih semua data', + expandText: 'Kembangkan baris', + collapseText: 'Runtuhkan baris', + triggerDescText: 'Klik untuk mengisih menurun', + triggerAscText: 'Klik untuk mengisih menaik', + cancelSortText: 'Klik untuk membatalkan pengisihan', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/nb_NO.tsx b/src/components/Table/Locale/nb_NO.tsx new file mode 100644 index 000000000..ae47e958c --- /dev/null +++ b/src/components/Table/Locale/nb_NO.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'nb_NO', + filterConfirmText: 'OK', + filterResetText: 'Tilbakestill', + filterEmptyText: 'Ingen filtre', + filterCheckallText: 'Velg alle elementer', + filterSearchPlaceholderText: 'Søk i filtre', + emptyText: 'Ingen data funnet', + selectInvertText: 'Inverter gjeldende side', + selectNoneText: 'Slett alle data', + selectionAllText: 'Velg alle data', + expandText: 'Utvid rad', + collapseText: 'Skjul rad', + triggerDescText: 'Klikk for å sortere synkende', + triggerAscText: 'Klikk for å sortere stigende', + cancelSortText: 'Klikk for å avbryte sortering', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/nl_BE.tsx b/src/components/Table/Locale/nl_BE.tsx new file mode 100644 index 000000000..29f60cddd --- /dev/null +++ b/src/components/Table/Locale/nl_BE.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'nl_BE', + filterConfirmText: 'OK', + filterResetText: 'Resetten', + filterEmptyText: 'Geen filters', + filterCheckallText: 'Selecteer alle items', + filterSearchPlaceholderText: 'Zoeken in filters', + emptyText: 'Geen gegevens gevonden', + selectInvertText: 'Huidige pagina omkeren', + selectNoneText: 'Wis alle gegevens', + selectionAllText: 'Selecteer alle gegevens', + expandText: 'Rij uitvouwen', + collapseText: 'Rij samenvouwen', + triggerDescText: 'Klik om aflopend te sorteren', + triggerAscText: 'Klik om oplopend te sorteren', + cancelSortText: 'Klik om sorteren te annuleren', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/nl_NL.tsx b/src/components/Table/Locale/nl_NL.tsx new file mode 100644 index 000000000..032c5f79c --- /dev/null +++ b/src/components/Table/Locale/nl_NL.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'nl_NL', + filterConfirmText: 'OK', + filterResetText: 'Resetten', + filterEmptyText: 'Geen filters', + filterCheckallText: 'Selecteer alle items', + filterSearchPlaceholderText: 'Zoeken in filters', + emptyText: 'Geen gegevens gevonden', + selectInvertText: 'Huidige pagina omkeren', + selectNoneText: 'Wis alle gegevens', + selectionAllText: 'Selecteer alle gegevens', + expandText: 'Rij uitvouwen', + collapseText: 'Rij samenvouwen', + triggerDescText: 'Klik om aflopend te sorteren', + triggerAscText: 'Klik om oplopend te sorteren', + cancelSortText: 'Klik om sorteren te annuleren', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/pl_PL.tsx b/src/components/Table/Locale/pl_PL.tsx new file mode 100644 index 000000000..fbc6a6cb3 --- /dev/null +++ b/src/components/Table/Locale/pl_PL.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'pl_PL', + filterConfirmText: 'OK', + filterResetText: 'Resetowanie', + filterEmptyText: 'Brak filtrów', + filterCheckallText: 'Wybierz wszystkie elementy', + filterSearchPlaceholderText: 'Szukaj w filtrach', + emptyText: 'Brak danych', + selectInvertText: 'Odwróć bieżącą stronę', + selectNoneText: 'Wyczyść wszystkie dane', + selectionAllText: 'Wybierz wszystkie dane', + expandText: 'Rozwiń wiersz', + collapseText: 'Zwiń wiersz', + triggerDescText: 'Kliknij, aby posortować malejąco', + triggerAscText: 'Kliknij, aby posortować rosnąco', + cancelSortText: 'Kliknij, aby anulować sortowanie', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/pt_BR.tsx b/src/components/Table/Locale/pt_BR.tsx new file mode 100644 index 000000000..6976e5ff9 --- /dev/null +++ b/src/components/Table/Locale/pt_BR.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'pt_BR', + filterConfirmText: 'Okey', + filterResetText: 'Repor', + filterEmptyText: 'Sem filtros', + filterCheckallText: 'Selecione todos os itens', + filterSearchPlaceholderText: 'Pesquisar em filtros', + emptyText: 'Nenhum dado encontrado', + selectInvertText: 'Inverter a página atual', + selectNoneText: 'Limpar todos os dados', + selectionAllText: 'Selecione todos os dados', + expandText: 'Expandir linha', + collapseText: 'Linha de colapso', + triggerDescText: 'Clique para classificar descendo', + triggerAscText: 'Clique para classificar ascendente', + cancelSortText: 'Clique para cancelar a classificação', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/pt_PT.tsx b/src/components/Table/Locale/pt_PT.tsx new file mode 100644 index 000000000..859363a5a --- /dev/null +++ b/src/components/Table/Locale/pt_PT.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'pt_PT', + filterConfirmText: 'OK', + filterResetText: 'Repor', + filterEmptyText: 'Sem filtros', + filterCheckallText: 'Selecione todos os itens', + filterSearchPlaceholderText: 'Search in filters', + emptyText: 'Não foram encontrados dados', + selectInvertText: 'Inverter a página actual', + selectNoneText: 'Limpar todos os dados', + selectionAllText: 'Selecione todos os dados', + expandText: 'Expandir linha', + collapseText: 'Collapse row', + triggerDescText: 'Clique para classificar a descida', + triggerAscText: 'Clique para classificar ascendente', + cancelSortText: 'Clique para cancelar a triagem', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/ru_RU.tsx b/src/components/Table/Locale/ru_RU.tsx new file mode 100644 index 000000000..7c8347fce --- /dev/null +++ b/src/components/Table/Locale/ru_RU.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'ru_RU', + filterConfirmText: 'Хорошо', + filterResetText: 'Сброс', + filterEmptyText: 'Нет фильтров', + filterCheckallText: 'Выбрать все элементы', + filterSearchPlaceholderText: 'Поиск в фильтрах', + emptyText: 'Данные не найдены', + selectInvertText: 'Инвертировать текущую страницу', + selectNoneText: 'Очистить все данные', + selectionAllText: 'Выбрать все данные', + expandText: 'Развернуть строку', + collapseText: 'Свернуть строку', + triggerDescText: 'Нажмите, чтобы отсортировать по убыванию', + triggerAscText: 'Нажмите, чтобы отсортировать по возрастанию', + cancelSortText: 'Нажмите, чтобы отменить сортировку', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/sv_SE.tsx b/src/components/Table/Locale/sv_SE.tsx new file mode 100644 index 000000000..0ecce8d3c --- /dev/null +++ b/src/components/Table/Locale/sv_SE.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'sv_SE', + filterConfirmText: 'Okej', + filterResetText: 'Återställ', + filterEmptyText: 'Inga filter', + filterCheckallText: 'Välj alla objekt', + filterSearchPlaceholderText: 'Sök i filter', + emptyText: 'Inga uppgifter hittades', + selectInvertText: 'Invertera aktuell sida', + selectNoneText: 'Rensa alla data', + selectionAllText: 'Markera alla data', + expandText: 'Expandera rad', + collapseText: 'Dölj rad', + triggerDescText: 'Klicka för att sortera fallande', + triggerAscText: 'Klicka för att sortera stigande', + cancelSortText: 'Klicka för att avbryta sortering', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/th_TH.tsx b/src/components/Table/Locale/th_TH.tsx new file mode 100644 index 000000000..bdc4753b0 --- /dev/null +++ b/src/components/Table/Locale/th_TH.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'th_TH', + filterConfirmText: 'ตกลง', + filterResetText: 'รีเซ็ต', + filterEmptyText: 'ไม่มีตัวกรอง', + filterCheckallText: 'เลือกรายการทั้งหมด', + filterSearchPlaceholderText: 'ค้นหาในตัวกรอง', + emptyText: 'ไม่พบข้อมูล', + selectInvertText: 'กลับหัวหน้าปัจจุบัน', + selectNoneText: 'ล้างข้อมูลทั้งหมด', + selectionAllText: 'เลือกข้อมูลทั้งหมด', + expandText: 'ขยายแถว', + collapseText: 'ยุบแถว', + triggerDescText: 'คลิกเพื่อเรียงลําดับจากมากไปหาน้อย', + triggerAscText: 'คลิกเพื่อจัดเรียงจากน้อยไปมาก', + cancelSortText: 'ยกเลิกการเรียงลําดับ', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/tr_TR.tsx b/src/components/Table/Locale/tr_TR.tsx new file mode 100644 index 000000000..25edb9e2f --- /dev/null +++ b/src/components/Table/Locale/tr_TR.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'tr_TR', + filterConfirmText: 'Tamam', + filterResetText: 'Sıfırla', + filterEmptyText: 'Filtre yok', + filterCheckallText: 'Tüm öğeleri seç', + filterSearchPlaceholderText: 'Filtrelerde ara', + emptyText: 'Veri bulunamadı', + selectInvertText: 'Geçerli sayfayı tersine çevir', + selectNoneText: 'Tüm verileri temizle', + selectionAllText: 'Tüm verileri seç', + expandText: 'Satırı genişlet', + collapseText: 'Satırı daralt', + triggerDescText: 'Azalan sıralamak için tıklayın', + triggerAscText: 'Artan sıralamak için tıklayın', + cancelSortText: 'Sıralamayı iptal etmek için tıklayın', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/uk_UA.tsx b/src/components/Table/Locale/uk_UA.tsx new file mode 100644 index 000000000..9aa7453d8 --- /dev/null +++ b/src/components/Table/Locale/uk_UA.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'uk_UA', + filterConfirmText: 'Гаразд', + filterResetText: 'Скинути', + filterEmptyText: 'Без фільтрів', + filterCheckallText: 'Вибрати всі елементи', + filterSearchPlaceholderText: 'Пошук у фільтрах', + emptyText: 'Дані не знайдено', + selectInvertText: 'Інвертувати поточну сторінку', + selectNoneText: 'Очистити всі дані', + selectionAllText: 'Виділити всі дані', + expandText: 'Розгорнути рядок', + collapseText: 'Згорнути рядок', + triggerDescText: 'Натисніть, щоб відсортувати за спаданням', + triggerAscText: 'Натисніть, щоб відсортувати за зростанням', + cancelSortText: 'Натисніть, щоб скасувати сортування', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/zh_CN.tsx b/src/components/Table/Locale/zh_CN.tsx new file mode 100644 index 000000000..3444ba8ce --- /dev/null +++ b/src/components/Table/Locale/zh_CN.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'zh_CN', + filterConfirmText: '还行', + filterResetText: '重置', + filterEmptyText: '无过滤器', + filterCheckallText: '选择所有项目', + filterSearchPlaceholderText: '在过滤器中搜索', + emptyText: '未找到数据', + selectInvertText: '反转当前页面', + selectNoneText: '清除所有数据', + selectionAllText: '选择所有数据', + expandText: '展开行', + collapseText: '折叠行', + triggerDescText: '单击以降序排序', + triggerAscText: '点击升序排序', + cancelSortText: '单击以取消排序', + }, +}; + +export default locale; diff --git a/src/components/Table/Locale/zh_TW.tsx b/src/components/Table/Locale/zh_TW.tsx new file mode 100644 index 000000000..e1178e4b3 --- /dev/null +++ b/src/components/Table/Locale/zh_TW.tsx @@ -0,0 +1,23 @@ +import type { TableLocale } from '../Table.types'; + +const locale: TableLocale = { + lang: { + locale: 'zh_TW', + filterConfirmText: '還行', + filterResetText: '重置', + filterEmptyText: '無篩檢程式', + filterCheckallText: '選擇所有專案', + filterSearchPlaceholderText: '在篩檢程式中搜索', + emptyText: '未找到數據', + selectInvertText: '反轉當前頁面', + selectNoneText: '清除所有數據', + selectionAllText: '選擇所有數據', + expandText: '展開行', + collapseText: '摺疊行', + triggerDescText: '按兩下以降序排序', + triggerAscText: '點擊升序排序', + cancelSortText: '按兩下以取消排序', + }, +}; + +export default locale; diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx index 86455b37f..1a903a2c6 100644 --- a/src/components/Table/Table.stories.tsx +++ b/src/components/Table/Table.stories.tsx @@ -1349,17 +1349,6 @@ const Page_Sizes_Story: ComponentStory = (args) => { }; return ( ( -
-

{'Data'}

-
- )} - dataSource={r} - sticky - columns={getColumns()} - emptyTextDetails="" - emptyText={'No data found'} pagination={{ layout: [ PaginationLayoutOptions.Sizes, @@ -1372,9 +1361,14 @@ const Page_Sizes_Story: ComponentStory = (args) => { selfControlled: false, total: r?.length, }} - scroll={{ - y: 2000, - }} + {...args} + title={() => ( +
+

{'Data'}

+
+ )} + dataSource={r} + columns={getColumns()} /> ); }; @@ -1641,4 +1635,18 @@ Nested.args = { Page_Sizes.args = { ...tableArgs, + columns: undefined, + dataSource: undefined, + pagination: { + layout: [ + PaginationLayoutOptions.Sizes, + PaginationLayoutOptions.Total, + PaginationLayoutOptions.Next, + PaginationLayoutOptions.Previous, + PaginationLayoutOptions.Pager, + ], + pageSizes: [5, 10, 20], + selfControlled: false, + total: 1000, + }, }; diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index a61b2b36a..b82d54844 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -3,8 +3,10 @@ import React, { ReactNode, useCallback, useContext, + useEffect, useMemo, useRef, + useState, } from 'react'; import type { Breakpoint } from '../../shared/utilities'; import { mergeClasses, omit, scrollTo } from '../../shared/utilities'; @@ -28,6 +30,7 @@ import type { GetRowKey, SorterResult, TableAction, + TableLocale, TableProps, } from './Table.types'; import { @@ -54,6 +57,8 @@ import ColumnGroup from './Internal/ColumnGroup'; import { useBreakpoint } from '../../hooks/useBreakpoint'; import { useCanvasDirection } from '../../hooks/useCanvasDirection'; import { Empty, EmptyMode } from '../Empty/index'; +import LocaleReceiver from '../LocaleProvider/LocaleReceiver'; +import enUS from './Locale/en_US'; import styles from './Styles/table.module.scss'; @@ -66,28 +71,29 @@ function InternalTable( const { alternateRowColor = true, bordered, - cancelSortText, + cancelSortText: defaultCancelSortText, cellBordered = false, children, classNames, - collapseText, + collapseText: defaultCollapseText, columns, dataSource, - emptyText, - emptyTextDetails, + emptyText: defaultEmptyText, + emptyTextDetails: defaultEmptyTextDetails, expandableConfig, - expandText, - filterCheckallText, - filterConfirmText, - filterEmptyText, - filterResetText, - filterSearchPlaceholderText, + expandText: defaultExpandText, + filterCheckallText: defaultFilterCheckallText, + filterConfirmText: defaultFilterConfirmText, + filterEmptyText: defaultFilterEmptyText, + filterResetText: defaultFilterResetText, + filterSearchPlaceholderText: defaultFilterSearchPlaceholderText, getPopupContainer, headerBordered = false, headerBottomBordered = false, indentSize, innerBordered = false, loading, + locale = enUS, onChange, outerBordered = false, pagination, @@ -96,15 +102,15 @@ function InternalTable( rowKey, rowSelection, scroll, - selectInvertText, - selectionAllText, - selectNoneText, + selectInvertText: defaultSelectInvertText, + selectionAllText: defaultSelectionAllText, + selectNoneText: defaultSelectNoneText, showSorterTooltip = true, size = TableSize.Medium, sortDirections, style, - triggerAscText, - triggerDescText, + triggerAscText: defaultTriggerAscText, + triggerDescText: defaultTriggerDescText, } = props; const baseColumns: ColumnsType = useMemo( @@ -170,6 +176,123 @@ function InternalTable( body: useRef(), }; + // ============================ Strings =========================== + const [filterConfirmText, setFilterConfirmText] = useState( + defaultFilterConfirmText + ); + const [filterResetText, setFilterResetText] = useState( + defaultFilterResetText + ); + const [filterEmptyText, setFilterEmptyText] = useState( + defaultFilterEmptyText + ); + const [filterCheckallText, setFilterCheckallText] = useState( + defaultFilterCheckallText + ); + const [filterSearchPlaceholderText, setFilterSearchPlaceholderText] = + useState(defaultFilterSearchPlaceholderText); + const [emptyText, setEmptyText] = useState ReactNode)>( + defaultEmptyText + ); + const [emptyTextDetails, setEmptyTextDetails] = useState( + defaultEmptyTextDetails + ); + const [selectInvertText, setSelectInvertText] = useState( + defaultSelectInvertText + ); + const [selectNoneText, setSelectNoneText] = useState( + defaultSelectNoneText + ); + const [selectionAllText, setSelectionAllText] = useState( + defaultSelectionAllText + ); + const [expandText, setExpandText] = useState(defaultExpandText); + const [collapseText, setCollapseText] = + useState(defaultCollapseText); + const [triggerDescText, setTriggerDescText] = useState( + defaultTriggerDescText + ); + const [triggerAscText, setTriggerAscText] = useState( + defaultTriggerAscText + ); + const [cancelSortText, setCancelSortText] = useState( + defaultCancelSortText + ); + + // Locs: if the prop isn't provided use the loc defaults. + // If the locale is changed, update. + useEffect(() => { + setFilterConfirmText( + props.filterConfirmText + ? props.filterConfirmText + : locale.lang!.filterConfirmText + ); + setFilterResetText( + props.filterResetText + ? props.filterResetText + : locale.lang!.filterResetText + ); + setFilterEmptyText( + props.filterEmptyText + ? props.filterEmptyText + : locale.lang!.filterEmptyText + ); + setFilterCheckallText( + props.filterCheckallText + ? props.filterCheckallText + : locale.lang!.filterCheckallText + ); + setFilterSearchPlaceholderText( + props.filterSearchPlaceholderText + ? props.filterSearchPlaceholderText + : locale.lang!.filterSearchPlaceholderText + ); + setEmptyText( + props.emptyText ? props.emptyText : locale.lang!.emptyText + ); + setEmptyTextDetails( + props.emptyTextDetails + ? props.emptyTextDetails + : locale.lang!.emptyTextDetails + ); + setSelectInvertText( + props.selectInvertText + ? props.selectInvertText + : locale.lang!.selectInvertText + ); + setSelectNoneText( + props.selectNoneText + ? props.selectNoneText + : locale.lang!.selectNoneText + ); + setSelectionAllText( + props.selectionAllText + ? props.selectionAllText + : locale.lang!.selectionAllText + ); + setExpandText( + props.expandText ? props.expandText : locale.lang!.expandText + ); + setCollapseText( + props.collapseText ? props.collapseText : locale.lang!.collapseText + ); + setTriggerDescText( + props.triggerDescText + ? props.triggerDescText + : locale.lang!.triggerDescText + ); + setTriggerAscText( + props.triggerAscText + ? props.triggerAscText + : locale.lang!.triggerAscText + ); + setCancelSortText( + props.cancelSortText + ? props.cancelSortText + : locale.lang!.cancelSortText + ); + }, [locale]); + // ============================ RowKey ============================ const getRowKey = useMemo>(() => { if (typeof rowKey === 'function') { @@ -368,9 +491,7 @@ function InternalTable( } const { - currentPage = mergedPagination.pageSizes - ? mergedPagination.currentPage || 1 - : 1, + currentPage = 1, total, pageSize = mergedPagination.pageSizes ? mergedPagination.pageSizes[0] @@ -591,65 +712,93 @@ function InternalTable( { [styles.tableWrapperRtl]: htmlDir === 'rtl' }, classNames, ]); + return ( -
- {topPaginationNode} - - {...tableProps} - columns={mergedColumns as OcTableProps['columns']} - direction={htmlDir} - expandableConfig={mergedExpandableConfig} - classNames={mergeClasses([ - styles.table, - { [styles.tableRtl]: htmlDir === 'rtl' }, - { [styles.tableLarge]: mergedSize === TableSize.Large }, - { [styles.tableMedium]: mergedSize === TableSize.Medium }, - { [styles.tableSmall]: mergedSize === TableSize.Small }, - { [styles.tableAlternate]: alternateRowColor }, - { [styles.tableBordered]: bordered }, - { - [styles.tableCellBordered]: - !bordered && - !rowBordered && - !innerBordered && - cellBordered, - }, - { - [styles.tableHeaderBordered]: - !bordered && - !rowBordered && - !innerBordered && - headerBordered, - }, - { - [styles.tableHeaderBottomBordered]: - !bordered && - !rowBordered && - !innerBordered && - !headerBordered && - headerBottomBordered, - }, - { - [styles.tableInnerBordered]: - !bordered && !rowBordered && innerBordered, - }, - { [styles.tableOuterBordered]: !bordered && outerBordered }, - { - [styles.tableRowBordered]: - !bordered && !innerBordered && rowBordered, - }, - { [styles.tableEmpty]: rawData.length === 0 }, - ])} - data={pageData} - rowKey={getRowKey} - rowClassName={internalRowClassName} - emptyText={renderEmpty(emptyText, emptyTextDetails)} - transformColumns={ - transformColumns as OcTableProps['transformColumns'] - } - /> - {bottomPaginationNode} -
+ + {(contextLocale: TableLocale) => { + const locale = { ...contextLocale, ...props.locale }; + + return ( +
+ {topPaginationNode} + + {...tableProps} + columns={ + mergedColumns as OcTableProps['columns'] + } + direction={htmlDir} + expandableConfig={mergedExpandableConfig} + classNames={mergeClasses([ + styles.table, + { [styles.tableRtl]: htmlDir === 'rtl' }, + { + [styles.tableLarge]: + mergedSize === TableSize.Large, + }, + { + [styles.tableMedium]: + mergedSize === TableSize.Medium, + }, + { + [styles.tableSmall]: + mergedSize === TableSize.Small, + }, + { [styles.tableAlternate]: alternateRowColor }, + { [styles.tableBordered]: bordered }, + { + [styles.tableCellBordered]: + !bordered && + !rowBordered && + !innerBordered && + cellBordered, + }, + { + [styles.tableHeaderBordered]: + !bordered && + !rowBordered && + !innerBordered && + headerBordered, + }, + { + [styles.tableHeaderBottomBordered]: + !bordered && + !rowBordered && + !innerBordered && + !headerBordered && + headerBottomBordered, + }, + { + [styles.tableInnerBordered]: + !bordered && + !rowBordered && + innerBordered, + }, + { + [styles.tableOuterBordered]: + !bordered && outerBordered, + }, + { + [styles.tableRowBordered]: + !bordered && + !innerBordered && + rowBordered, + }, + { [styles.tableEmpty]: rawData.length === 0 }, + ])} + data={pageData} + locale={locale!.lang} + rowKey={getRowKey} + rowClassName={internalRowClassName} + emptyText={renderEmpty(emptyText, emptyTextDetails)} + transformColumns={ + transformColumns as OcTableProps['transformColumns'] + } + /> + {bottomPaginationNode} +
+ ); + }} +
); } @@ -678,22 +827,6 @@ interface TableInterface extends InternalTableType { const Table = ForwardTable as TableInterface; Table.defaultProps = { - filterConfirmText: 'OK', - filterResetText: 'Reset', - filterEmptyText: 'No filters', - filterCheckallText: 'Select all items', - filterSearchPlaceholderText: 'Search in filters', - emptyText: 'Short Message Here', - emptyTextDetails: - 'More detail on how might the user be able to get around this', - selectInvertText: 'Invert current page', - selectNoneText: 'Clear all data', - selectionAllText: 'Select all data', - expandText: 'Expand row', - collapseText: 'Collapse row', - triggerDescText: 'Click to sort descending', - triggerAscText: 'Click to sort ascending', - cancelSortText: 'Click to cancel sorting', rowKey: 'key', }; diff --git a/src/components/Table/Table.types.tsx b/src/components/Table/Table.types.tsx index 258464f6a..4b16ab89a 100644 --- a/src/components/Table/Table.types.tsx +++ b/src/components/Table/Table.types.tsx @@ -1,6 +1,7 @@ import type * as React from 'react'; import type { ColumnType as OcColumnType, + Locale as OcTableLocale, RenderedCell as OcRenderedCell, FixedType, OcTableProps, @@ -41,6 +42,10 @@ export type TableAction = typeof TableActions[number]; export type CompareFn = (a: T, b: T, sortOrder?: SortOrder) => number; +export type TableLocale = { + lang: OcTableLocale; +}; + export interface ColumnFilterItem { text: React.ReactNode; value: string | number | boolean; @@ -361,7 +366,12 @@ export interface ChangeEventInfo { export interface TableProps extends Omit< OcTableProps, - 'data' | 'columns' | 'scroll' | 'emptyText' | 'transformColumns' + | 'columns' + | 'data' + | 'emptyText' + | 'locale' + | 'scroll' + | 'transformColumns' > { /** * The Table Row background colors alternate. @@ -457,6 +467,11 @@ export interface TableProps * The Table loading state. */ loading?: boolean | SpinnerProps; + /** + * The Table locale. + * @default 'enUS' + */ + locale?: TableLocale; /** * Callback executed when Table pagination, filters, or sort is changed. */