🐛[BUG] ProTable does not respond to ConfigProvider from antd

[jamalabo1]

• Ant Design Pro 4
• Umi 2.13.4
• Google chrome
• Windows 10

when the direction is set to RTL the components still adapt to LTR style, from pagination to header and search even toolbar,

        <ConfigProvider direction={PageDirection}>
            <PageHeaderWrapper>
                <IntlProvider value={{locale: getLocale(), getMessage: TableGetMessage}}>
                    <ProTable<App>
                        search={false}
                        headerTitle={null}
                        actionRef={actionRef}
                        rowKey={x => x.id}
                        tableAlertRender={false}
                        request={params => queryApps({
                            ...params,
                        })}
                        columns={columns}
                        rowSelection={{}}
                    />
                </IntlProvider>
            </PageHeaderWrapper>
        </ConfigProvider>

[chenshuai2144]

Our support for RTL is really bad, are you interested in giving a pr？

[jamalabo1]

@chenshuai2144 no problem, I'll do my best. but can't you wrap the components so that they respond to antd ConfigProvider?

[ssteiger]

How I fixed this in my project (hacky):

• import an-design/pro-table package by hand (copied out of node_modules folder)
• in /src/component/intlContext/index.js line 106

var IntlContext = _react.default.createContext(zhCNIntl);
# to
var IntlContext = _react.default.createContext(enUSIntl);

import

import ProTable, { ProColumns, TableDropdown, ActionType } from '../../sharedComponents/pro-table/lib'

[DavidNorena]

any workaround ?

[DavidNorena]

I found a possible issue, and its related to craco-antd package ...

I had to modify this piece of code manually inside the node_modules:

https://github.com/DocSpring/craco-antd/blob/master/lib/craco-antd.js#L91

and change the library directory from "lib" to "es" compile and its working again ...

@chenshuai2144 why did it work ?

does that change (the one manually made by me) break anything else ?...

im using antd: 4.7.0 @ant-design/pro-table: 2.9.5

[ItamarSoffer]

Hi, I noticed two things:

1. If I change the toolbar (with the options prop) it cancels the RTL from the ContextProvider
2. RTL and sticky prop not working together: cant scroll from right to left

Any ideas why?

[sansavision]

A simple way for the ConfigProvider to work (as far as tested on the ProSelect component) is to use the babel-plugin-import. Either directly or if you are using it through craco - antd; set the option in the craco config js. babelPluginImportOptions: { libraryDirectory: "es", },