[Table] Improve RTL virtualized demo support (#18038)

mui · Oct 27, 2019 · c8176bb · c8176bb
1 parent 400c504
commit c8176bb
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/docs/src/pages/components/tables/ReactVirtualizedTable.js b/docs/src/pages/components/tables/ReactVirtualizedTable.js
@@ -12,6 +12,14 @@ const styles = theme => ({
     alignItems: 'center',
     boxSizing: 'border-box',
   },
+  table: {
+    // temporary right-to-left patch, waiting for
+    // https://github.com/bvaughn/react-virtualized/issues/454
+    '& .ReactVirtualized__Table__headerRow': {
+      flip: false,
+      paddingRight: theme.direction === 'rtl' ? '0px !important' : undefined,
+    },
+  },
   tableRow: {
     cursor: 'pointer',
   },
@@ -84,7 +92,11 @@ class MuiVirtualizedTable extends React.PureComponent {
             height={height}
             width={width}
             rowHeight={rowHeight}
+            gridStyle={{
+              direction: 'inherit',
+            }}
             headerHeight={headerHeight}
+            className={classes.table}
             {...tableProps}
             rowClassName={this.getRowClassName}
           >

diff --git a/docs/src/pages/components/tables/ReactVirtualizedTable.tsx b/docs/src/pages/components/tables/ReactVirtualizedTable.tsx
@@ -5,13 +5,31 @@ import TableCell from '@material-ui/core/TableCell';
 import Paper from '@material-ui/core/Paper';
 import { AutoSizer, Column, Table, TableCellRenderer, TableHeaderProps } from 'react-virtualized';
 
+declare module '@material-ui/core/styles/withStyles' {
+  // Augment the BaseCSSProperties so that we can control jss-rtl
+  interface BaseCSSProperties {
+    /*
+     * Used to control if the rule-set should be affected by rtl transformation
+     */
+    flip?: boolean;
+  }
+}
+
 const styles = (theme: Theme) =>
   createStyles({
     flexContainer: {
       display: 'flex',
       alignItems: 'center',
       boxSizing: 'border-box',
     },
+    table: {
+      // temporary right-to-left patch, waiting for
+      // https://github.com/bvaughn/react-virtualized/issues/454
+      '& .ReactVirtualized__Table__headerRow': {
+        flip: false,
+        paddingRight: theme.direction === 'rtl' ? '0px !important' : undefined,
+      },
+    },
     tableRow: {
       cursor: 'pointer',
     },
@@ -104,7 +122,11 @@ class MuiVirtualizedTable extends React.PureComponent<MuiVirtualizedTableProps>
             height={height}
             width={width}
             rowHeight={rowHeight!}
+            gridStyle={{
+              direction: 'inherit',
+            }}
             headerHeight={headerHeight!}
+            className={classes.table}
             {...tableProps}
             rowClassName={this.getRowClassName}
           >