Fluent UI Details List start from the left

Question

I have a UI as follows:

implemented using Fluent UI DetailsList. I see a lot of space on the left before displaying the list.

How do I update this to:

Answer 1

If you don't need selection in your table you can pass selectionMode={SelectionMode.none} into the DetailsList component, and it will remove the selection column entirely and shift your list to the left. However, the additional whitespace to the left of the "hovered" gray portion of the table must be application specific, because DetailsList does not do that by default, you can see here in this code sandbox that it's right up against the edge of the page padding: https://codesandbox.io/s/rough-morning-z7v25g?file=/src/App.tsx

import { DetailsList, SelectionMode } from "@fluentui/react";

export default function App() {
  const items = [
    { age: 31, name: "Bob" },
    { age: 30, name: "Alice" }
  ];

  const columns = [
    {
      key: "age",
      fieldName: "name",
      name: "Age",
      minWidth: 100
    },
    {
      key: "name",
      fieldName: "name",
      name: "Name",
      minWidth: 100
    }
  ];

  return (
    <DetailsList
      items={items}
      columns={columns}
      selectionMode={SelectionMode.none}
    />
  );
}