Column Actions and selector going to last on dynamic columns even with defined columnOrder

[authentichamza]

material-react-table version

2.11.3

react & react-dom versions

18.2.0

Describe the bug and the steps to reproduce it

In dynamic columns table the rowActions and select are not at start and even if i use columnOrder array it still doesnt affect that so do guide me on this.

Minimal, Reproducible Example - (Optional, but Recommended)

const ResumeTable = () => {
const params = useParams()
const companyId = params.companyId;
const jobId = params.jobId;
const [rowSelection, setRowSelection] = useState([])
const [formattedResumes, setFormattedResumes] = useState([])
const [isLoading, setIsLoading] = useState(true)
const [columnOrder, setColumnOrder] = useState([]);

useEffect(()=>{
	client.resumesList({companyId: params.companyId, jobId: params.jobId })
	.then((result)=>{
		let scoredResumes = organiseResumes(result.results)
		const extracted_columns = Object.keys(scoredResumes[0]).map((columnId) => ({
	      header: columnId,
	      accessorKey: columnId,
	      id: columnId,
	    }));
		setColumnOrder(['mrt-row-select', ...extracted_columns.map((c) => c.accessorKey), 'mrt-row-actions']);
		setFormattedResumes(scoredResumes)
		setIsLoading(false)
	})
}, [])

const columns = useMemo(
    () =>
      formattedResumes.length
        ? Object.keys(formattedResumes[0]).map((columnId) => ({
            header: columnId,
            accessorKey: columnId,
            id: columnId,
          }))
        : [],
    [formattedResumes],
  );


const table = useMaterialReactTable({
	columns,
	data: formattedResumes,
	enableRowActions: true,
	enableRowSelection: true,
	paginationDisplayMode: 'pages',
	positionToolbarAlertBanner: 'bottom',
	state: { isLoading, rowSelection, columnOrder },
	onColumnOrderChange: setColumnOrder,
	onRowSelectionChange: setRowSelection,
	getRowId: (originalRow) => originalRow?.id,
	renderTopToolbarCustomActions: ({ table }) => (
		<>
		{Object.keys(rowSelection).length > 0 && (
		    <MDButton
		    	color="danger"
		    	onClick={()=>deleteResumes()}
		    >
		      Delete Selected Resumes
		    </MDButton>
		)}
	    </>
	),
	mantinePaginationProps: {
	  radius: 'xl',
	  size: 'lg',
	},
	renderRowActionMenuItems: () => [
	    <MenuItem>View Metadata</MenuItem>
	]
});

useEffect(() => {
    setColumnOrder(columns.map((column) => column.id));
}, [columns]);


return <MaterialReactTable height={700} table={table} />;

};
`

Screenshots or Videos (Optional)

No response

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

None

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.

[KevinVandy]

I think it's just because of your last useEffect calling setColumnOrder. It's removing the select and actions columns from the column order state. I just updated to dynamic colulmns example to have row selection, and it works just fine.

Remove this useEffect.

[ponomarevkonst]

You can also specify order of row select ('mrt-row-select') in your useEffect.

setColumnOrder(['mrt-row-select', ...columns.map((col) => col.id)])

https://www.material-react-table.com/docs/guides/column-ordering-dnd#change-the-default-column-order