user selectable display format for dates / times (localisation)

[s-light]

Hello community,

i am experimenting with localization support for my table view.

currently i have a custom cell rendering in my columnsDefinition like this:

renderCell.js

// https://moment.github.io/luxon/#/formatting?id=presets
export const defaultDateFormat = {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
};

export const renderCellDate = ({ cell }) => (
    <span>
        {cell.getValue().setLocale("de").toLocaleString(defaultDateFormat)}
    </span>
);

columnsDefinition.js

import { renderCellDate } from "../renderCell";

export const columnsDefinition = [
    {
        accessorKey: "person_forename",
        header: "Vorname", //simple recommended way to define a column
        enableHiding: false, //disable a feature for this column
        type: String, // for importFileXLSX
        required: true, // for importFileXLSX
        width: 15, // for exportFileXLSX
    },
    //...
    {
        // accessorKey: "person_dateofbirth",
        id: "person_dateofbirth",
        // enableEditing: false,
        header: "Geburtstag",
        accessorFn: (row) => accessorFnDate(row, "person_dateofbirth"),
        // https://www.material-react-table.com/docs/guides/data-columns#custom-cell-render
        Cell: renderCellDate,
        type: Date,
        required: false,
        width: 15,
    },
//...
];

this way my view is rendered as i like it - but the date-format is hardcoded in the renderCell.js file :-(
in the future i like to add a ui so the user can select how he wants to show up things..

i have split out the renderCellDate as i use it in a bunch of different columnsDefinition...

i found that in mui it seems the way to do things is to use the
LocalizationProvider with an library adapter:
so i added this example with the Luxon adapter - and the example worked.

but i have no idea how to get this formatting now into my rendering function / columnsDefinition...

i think i need somehow a pointer to the Luxon instance -
so i can use this for formatting..

it also seems to be possible to do some localization via the ThemeProvider thing (i used it for the automatic dark-mode)

has anybody any ideas or tips for this?

i think iam missing something very basic...

sunny greetings
stefan

edit: fixed misuse of accessorFn to Cell for rendering