Column resize RTL && Cell value align

[Tomerkakou]

material-react-table version

v3.0.1

react & react-dom versions

^18.3.1

Describe the bug and the steps to reproduce it

mui theme defined on rtl and table is configured correct but still all values in cell are align to left and column resize is on the left size and break ui i think the problem also related to values as hebrew ,when setting column resize direction to ltr the ui is ok but on resize is wrong direction

UPDATE
removing stylis-plugin-rtl solve the resize problem but its againt mui guide of rtl, but still text align inside cell is in correct on rtl

Minimal, Reproducible Example - (Optional, but Recommended)

import { MaterialReactTable, MRT_ColumnDef } from "material-react-table";
import { MRT_Localization_HE } from "material-react-table/locales/he";
import React from "react";

interface DataTableProps {
loading?: boolean;
data: any[];
columns: MRT_ColumnDef[];
}

const DataTable: React.FC = ({ loading, data, columns }) => {
return (
<MaterialReactTable
columns={columns}
data={data}
localization={MRT_Localization_HE}
enableColumnResizing
columnResizeDirection="rtl"
initialState={{
pagination: { pageSize: 100, pageIndex: 0 },
showColumnFilters: true,
density: "compact",
}}
enableRowSelection={false}
enableEditing={false}
/>
);
};

export default DataTable;

import { DataGrid } from "@mui/x-data-grid";
import axios from "axios";
import ContianerWapper from "components/ContainerWrapper";
import DataTable from "components/DataTable";
import moment from "moment-timezone";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";

export interface Movment {
id: string;
from_location: string;
item_sku: string;
quantity_change: number;
timestamp: Date;
to_location: string;
username: string;
itemName: string;
}

const InventoryMovments = () => {
const [movments, setMovments] = useState<Movment[]>([]);

useEffect(() => {
(async () => {
try {
const resposne = await axios.get("/inventory/movments");
resposne.data.forEach(
(movment: Movment) =>
(movment.timestamp =
movment.timestamp && new Date(movment.timestamp))
);
setMovments(resposne.data);
} catch (e) {
console.error(e);
toast.error("שגיאה בטעינת תנועות המלאי");
}
})();
}, []);

return (

<DataTable
data={movments}
columns={[
{
accessorKey: "itemName",
header: "מוצר",
},
{ accessorKey: "item_sku", header: "ברקוד" },
{ accessorKey: "quantity_change", header: "כמות" },
{
accessorKey: "from_location",
header: "מיקום",
},
{
accessorKey: "timestamp",
Cell: ({ cell }) =>
moment(cell.getValue()).format("DD/MM/YYYY HH:mm:ss"),
header: "תאריך",
},
{
accessorKey: "username",
header: "משתמש",
},
]}
/>

);
};

export default InventoryMovments;

Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?

No, because I do not know how

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.