@ceed/ads 1.35.1 → 1.36.0

package/dist/components/data-display/DataTable.md

@@ -228,9 +228,13 @@ A link type. Renders as a clickable link.
 A type for row-level action buttons.
 
 ```tsx
-<DataTable rows={rows4} columns={columns} pinnedColumns={{
-  right: ['actions']
-}} />
+<DataTable
+    rows={rows4}
+    columns={columns}
+    pinnedColumns={{
+      right: ["actions"]
+    }}
+  />
 ```
 
 ```tsx
@@ -312,24 +316,42 @@ const [selectionModel, setSelectionModel] = useState<string[]>([]);
 
 ```tsx
 <Stack height="500px" gap={1}>
-  <Typography level="title-sm" textColor="text.secondary">
-    status가 Closed인 행은 선택할 수 없습니다.
-  </Typography>
-  <DataTable checkboxSelection stripe="even" hoverRow stickyHeader rows={rows3} columns={columns} selectionModel={selectionModel} onSelectionModelChange={newSelection => setSelectionModel(newSelection)} isRowSelectable={({
-    row
-  }) => row.status !== 'Closed'} />
-</Stack>
+    <Typography level="title-sm" textColor="text.secondary">
+      status가 Closed인 행은 선택할 수 없습니다.
+    </Typography>
+    <DataTable
+      checkboxSelection
+      stripe="even"
+      hoverRow
+      stickyHeader
+      rows={rows3}
+      columns={columns}
+      selectionModel={selectionModel}
+      onSelectionModelChange={(newSelection) => setSelectionModel(newSelection)}
+      isRowSelectable={({ row }) => row.status !== "Closed"}
+    />
+  </Stack>
 ```
 
 ### Disabling Click Selection
 
 ```tsx
 <Stack height="500px">
-  <Typography level="title-sm" textColor="text.secondary">
-    Disable selection on click.
-  </Typography>
-  <DataTable checkboxSelection stripe="even" hoverRow selectionModel={selectedId} stickyHeader onSelectionModelChange={newSelection => setSelectedId(newSelection)} disableSelectionOnClick rows={rows4} columns={columns} />
-</Stack>
+    <Typography level="title-sm" textColor="text.secondary">
+      Disable selection on click.
+    </Typography>
+    <DataTable
+      checkboxSelection
+      stripe="even"
+      hoverRow
+      selectionModel={selectedId}
+      stickyHeader
+      onSelectionModelChange={(newSelection) => setSelectedId(newSelection)}
+      disableSelectionOnClick
+      rows={rows4}
+      columns={columns}
+    />
+  </Stack>
 ```
 
 ### Total Selection (isTotalSelected)
@@ -338,22 +360,39 @@ Used to manage the total selection state including data beyond the current page
 
 ```tsx
 <Stack gap={2}>
-  <Box sx={{
-    p: 2,
-    bgcolor: 'primary.50',
-    borderRadius: '8px'
-  }}>
-  <Typography level="body-sm">
-    {isTotalSelected ? `All ${allRows.length} items are selected (across all pages)` : `${selectionModel.length} items selected on current page`}
-  </Typography>
-</Box>
-<DataTable rows={pagedRows} columns={columns} checkboxSelection selectionModel={selectionModel} onSelectionModelChange={(newSelection, totalSelected) => {
-  setSelectionModel(newSelection);
-  if (totalSelected !== undefined) {
-    setIsTotalSelected(totalSelected);
-  }
-}} isTotalSelected={isTotalSelected} pagination paginationMode="server" rowCount={allRows.length} paginationModel={paginationModel} onPaginationModelChange={setPaginationModel} noWrap />
-</Stack>
+    <Box
+      sx={{
+        p: 2,
+        bgcolor: "primary.50",
+        borderRadius: "8px"
+      }}
+    >
+      <Typography level="body-sm">
+        {isTotalSelected
+          ? `All ${allRows.length} items are selected (across all pages)`
+          : `${selectionModel.length} items selected on current page`}
+      </Typography>
+    </Box>
+    <DataTable
+      rows={pagedRows}
+      columns={columns}
+      checkboxSelection
+      selectionModel={selectionModel}
+      onSelectionModelChange={(newSelection, totalSelected) => {
+        setSelectionModel(newSelection);
+        if (totalSelected !== undefined) {
+          setIsTotalSelected(totalSelected);
+        }
+      }}
+      isTotalSelected={isTotalSelected}
+      pagination
+      paginationMode="server"
+      rowCount={allRows.length}
+      paginationModel={paginationModel}
+      onPaginationModelChange={setPaginationModel}
+      noWrap
+    />
+  </Stack>
 ```
 
 ```tsx
@@ -388,13 +427,17 @@ The selection state is applied based on the last clicked checkbox's resulting st
 
 ```tsx
 <Stack spacing={2}>
-  <Typography level="body-sm">
-    Hold Shift and click checkboxes to select a range of rows. The selection state is applied based on the first
-    clicked checkbox&apos;s resulting state.
-  </Typography>
-  <DataTable {...args} selectionModel={selectionModel} onSelectionModelChange={setSelectionModel} />
-  <Typography level="body-xs">Selected IDs: {selectionModel.join(', ') || 'None'}</Typography>
-</Stack>
+    <Typography level="body-sm">
+      Hold Shift and click checkboxes to select a range of rows. The selection state is applied
+      based on the first clicked checkbox&apos;s resulting state.
+    </Typography>
+    <DataTable
+      {...args}
+      selectionModel={selectionModel}
+      onSelectionModelChange={setSelectionModel}
+    />
+    <Typography level="body-xs">Selected IDs: {selectionModel.join(", ") || "None"}</Typography>
+  </Stack>
 ```
 
 **How it works:**
@@ -415,14 +458,18 @@ When a row has focus, use keyboard shortcuts to navigate and interact with rows.
 
 ```tsx
 <Stack spacing={2}>
-  <Typography level="body-sm">
-    Click a row to focus, then use keyboard to navigate. Arrow Up/Down to move, Space to toggle selection,
-    Home/End to jump to first/last row, PageUp/PageDown to move by 10 rows. Hold Shift with any navigation key to
-    extend selection.
-  </Typography>
-  <DataTable {...args} selectionModel={selectionModel} onSelectionModelChange={setSelectionModel} />
-  <Typography level="body-xs">Selected IDs: {selectionModel.join(', ') || 'None'}</Typography>
-</Stack>
+    <Typography level="body-sm">
+      Click a row to focus, then use keyboard to navigate. Arrow Up/Down to move, Space to toggle
+      selection, Home/End to jump to first/last row, PageUp/PageDown to move by 10 rows. Hold Shift
+      with any navigation key to extend selection.
+    </Typography>
+    <DataTable
+      {...args}
+      selectionModel={selectionModel}
+      onSelectionModelChange={setSelectionModel}
+    />
+    <Typography level="body-xs">Selected IDs: {selectionModel.join(", ") || "None"}</Typography>
+  </Stack>
 ```
 
 **Supported keys:**
@@ -452,7 +499,20 @@ When a row has focus, use keyboard shortcuts to navigate and interact with rows.
 ### Back Office Style
 
 ```tsx
-<DataTable rows={args.rows} columns={args.columns} checkboxSelection={args.checkboxSelection} hoverRow={args.hoverRow} noWrap={args.noWrap} stripe={args.stripe} stickyHeader={args.stickyHeader} slots={args.slots} slotProps={args.slotProps} selectionModel={selectionModel} onSelectionModelChange={setSelectionModel} pagination={args.pagination} />
+<DataTable
+    rows={args.rows}
+    columns={args.columns}
+    checkboxSelection={args.checkboxSelection}
+    hoverRow={args.hoverRow}
+    noWrap={args.noWrap}
+    stripe={args.stripe}
+    stickyHeader={args.stickyHeader}
+    slots={args.slots}
+    slotProps={args.slotProps}
+    selectionModel={selectionModel}
+    onSelectionModelChange={setSelectionModel}
+    pagination={args.pagination}
+  />
 ```
 
 #### Commonly Used Table Options
@@ -490,21 +550,218 @@ When a row has focus, use keyboard shortcuts to navigate and interact with rows.
 
 ```tsx
 <Stack height="500px">
-  <Typography level="title-sm" textColor="text.secondary">
-    Virtualized DataTable
-  </Typography>
-  <DataTable checkboxSelection stripe="even" hoverRow selectionModel={selectedId} stickyHeader onSelectionModelChange={newSelection => setSelectedId(newSelection)} rows={[...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4, ...rows4].map((row, i) => ({
-    ...row,
-    id: i
-  }))} columns={columns} initialState={{
-    sorting: {
-      sortModel: [{
-        field: 'number',
-        sort: 'asc'
-      }]
-    }
-  }} />
-</Stack>
+    <Typography level="title-sm" textColor="text.secondary">
+      Virtualized DataTable
+    </Typography>
+    <DataTable
+      checkboxSelection
+      stripe="even"
+      hoverRow
+      selectionModel={selectedId}
+      stickyHeader
+      onSelectionModelChange={(newSelection) => setSelectedId(newSelection)}
+      rows={[
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4,
+        ...rows4
+      ].map((row, i) => ({
+        ...row,
+        id: i
+      }))}
+      columns={columns}
+      initialState={{
+        sorting: {
+          sortModel: [
+            {
+              field: "number",
+              sort: "asc"
+            }
+          ]
+        }
+      }}
+    />
+  </Stack>
 ```
 
 ## Slots & SlotProps Customization
@@ -524,9 +781,16 @@ DataTable allows customization of various parts through `slots` and `slotProps`.
 ### Custom Toolbar
 
 ```tsx
-<DataTable rows={filteredRows} columns={columns} slots={{
-  toolbar: CustomToolbar
-}} noWrap stickyHeader stripe="even" />
+<DataTable
+    rows={filteredRows}
+    columns={columns}
+    slots={{
+      toolbar: CustomToolbar
+    }}
+    noWrap
+    stickyHeader
+    stripe="even"
+  />
 ```
 
 ```tsx
@@ -543,9 +807,14 @@ const CustomToolbar = () => (
 ### Custom Footer
 
 ```tsx
-<DataTable rows={tableRows} columns={columns} slots={{
-  footer: CustomFooter
-}} noWrap />
+<DataTable
+    rows={tableRows}
+    columns={columns}
+    slots={{
+      footer: CustomFooter
+    }}
+    noWrap
+  />
 ```
 
 ```tsx
@@ -562,17 +831,26 @@ const CustomFooter = () => (
 
 ```tsx
 <Stack gap={2}>
-  <Button onClick={() => setLoading(!loading)}>{loading ? 'Stop Loading' : 'Start Loading'}</Button>
-  <DataTable rows={tableRows} columns={columns} loading={loading} slots={{
-    loadingOverlay: CustomLoadingOverlay
-  }} noWrap slotProps={{
-    background: {
-      style: {
-        height: '300px'
-      }
-    }
-  }} />
-</Stack>
+    <Button onClick={() => setLoading(!loading)}>
+      {loading ? "Stop Loading" : "Start Loading"}
+    </Button>
+    <DataTable
+      rows={tableRows}
+      columns={columns}
+      loading={loading}
+      slots={{
+        loadingOverlay: CustomLoadingOverlay
+      }}
+      noWrap
+      slotProps={{
+        background: {
+          style: {
+            height: "300px"
+          }
+        }
+      }}
+    />
+  </Stack>
 ```
 
 ```tsx
@@ -626,13 +904,19 @@ When `rows` is empty and `loading` is not `true`, a no rows overlay is displayed
 You can customize the empty state UI using `slots.noRowsOverlay`.
 
 ```tsx
-<DataTable rows={[]} columns={tableColumns} noWrap slots={{
-  noRowsOverlay: CustomOverlay
-}} slotProps={{
-  noRowsOverlay: {
-    message: 'Custom message via slotProps'
-  }
-}} />
+<DataTable
+    rows={[]}
+    columns={tableColumns}
+    noWrap
+    slots={{
+      noRowsOverlay: CustomOverlay
+    }}
+    slotProps={{
+      noRowsOverlay: {
+        message: "Custom message via slotProps"
+      }
+    }}
+  />
 ```
 
 ```tsx
@@ -695,18 +979,26 @@ When `loading` is `true`, the loading overlay takes priority over the no rows ov
 
 ```tsx
 <Stack gap={2}>
-  <Button onClick={() => setLoading(!loading)}>{loading ? 'Stop Loading' : 'Start Loading'}</Button>
-  <Typography level="body-sm">
-    {loading ? 'Loading overlay is shown (noRowsOverlay hidden)' : 'NoRowsOverlay is shown'}
-  </Typography>
-  <DataTable rows={[]} columns={tableColumns} loading={loading} noWrap slotProps={{
-    background: {
-      style: {
-        height: '300px'
-      }
-    }
-  }} />
-</Stack>
+    <Button onClick={() => setLoading(!loading)}>
+      {loading ? "Stop Loading" : "Start Loading"}
+    </Button>
+    <Typography level="body-sm">
+      {loading ? "Loading overlay is shown (noRowsOverlay hidden)" : "NoRowsOverlay is shown"}
+    </Typography>
+    <DataTable
+      rows={[]}
+      columns={tableColumns}
+      loading={loading}
+      noWrap
+      slotProps={{
+        background: {
+          style: {
+            height: "300px"
+          }
+        }
+      }}
+    />
+  </Stack>
 ```
 
 ### Combined Custom Loading + No Rows Overlay
@@ -715,31 +1007,48 @@ Both `loadingOverlay` and `noRowsOverlay` slots can be customized simultaneously
 
 ```tsx
 <Stack gap={2}>
-  <Stack direction="row" gap={1} alignItems="center">
-    <Button onClick={() => setLoading(!loading)}>{loading ? 'Stop Loading' : 'Start Loading'}</Button>
-    <Typography level="body-xs" textColor="text.tertiary">
-      {loading ? 'Custom loading overlay shown' : 'Custom no rows overlay shown'}
-    </Typography>
+    <Stack direction="row" gap={1} alignItems="center">
+      <Button onClick={() => setLoading(!loading)}>
+        {loading ? "Stop Loading" : "Start Loading"}
+      </Button>
+      <Typography level="body-xs" textColor="text.tertiary">
+        {loading ? "Custom loading overlay shown" : "Custom no rows overlay shown"}
+      </Typography>
+    </Stack>
+    <DataTable
+      rows={[]}
+      columns={tableColumns}
+      loading={loading}
+      noWrap
+      slots={{
+        loadingOverlay: CustomLoadingOverlay,
+        noRowsOverlay: CustomNoRowsOverlay
+      }}
+      slotProps={{
+        background: {
+          style: {
+            height: "300px"
+          }
+        }
+      }}
+    />
   </Stack>
-  <DataTable rows={[]} columns={tableColumns} loading={loading} noWrap slots={{
-    loadingOverlay: CustomLoadingOverlay,
-    noRowsOverlay: CustomNoRowsOverlay
-  }} slotProps={{
-    background: {
-      style: {
-        height: '300px'
-      }
-    }
-  }} />
-</Stack>
 ```
 
 ### Custom Checkbox
 
 ```tsx
-<DataTable rows={tableRows} columns={columns} checkboxSelection selectionModel={selectionModel} onSelectionModelChange={newSelection => setSelectionModel(newSelection)} slots={{
-  checkbox: CustomCheckbox
-}} noWrap />
+<DataTable
+    rows={tableRows}
+    columns={columns}
+    checkboxSelection
+    selectionModel={selectionModel}
+    onSelectionModelChange={(newSelection) => setSelectionModel(newSelection)}
+    slots={{
+      checkbox: CustomCheckbox
+    }}
+    noWrap
+  />
 ```
 
 ```tsx
@@ -791,16 +1100,57 @@ You can style the table background area using `slotProps.background`. Height spe
 ### Customizing Column Rendering
 
 ```tsx
-<DataTable rows={useMemo(() => [...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3, ...rows3].map((row, i) => ({
-  ...row,
-  id: i + 1
-})), [])} columns={columns} checkboxSelection stickyHeader stripe="even" noWrap slotProps={{
-  background: {
-    style: {
-      height: '600px'
-    }
-  }
-}} />
+<DataTable
+    rows={useMemo(
+      () =>
+        [
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3,
+          ...rows3
+        ].map((row, i) => ({
+          ...row,
+          id: i + 1
+        })),
+      []
+    )}
+    columns={columns}
+    checkboxSelection
+    stickyHeader
+    stripe="even"
+    noWrap
+    slotProps={{
+      background: {
+        style: {
+          height: "600px"
+        }
+      }
+    }}
+  />
 ```
 
 ### Complex UI in Cells
@@ -1026,23 +1376,44 @@ Hidden columns are completely removed from the DOM for optimal rendering perform
 
 ```tsx
 <Stack spacing={2}>
-  <Stack direction="row" spacing={1} sx={{
-    flexWrap: 'wrap'
-  }}>
-  {allColumns.map(col => <label key={col.field as string} style={{
-    display: 'flex',
-    alignItems: 'center',
-    gap: 4
-  }}>
-  <input type="checkbox" checked={visibilityModel[col.field as string] !== false} onChange={e => setVisibilityModel(prev => ({
-    ...prev,
-    [col.field as string]: e.target.checked
-  }))} />
-  {col.headerName}
-</label>)}
-</Stack>
-<DataTable rows={rows2} columns={allColumns} columnVisibilityModel={visibilityModel} onColumnVisibilityModelChange={setVisibilityModel} noWrap />
-</Stack>
+    <Stack
+      direction="row"
+      spacing={1}
+      sx={{
+        flexWrap: "wrap"
+      }}
+    >
+      {allColumns.map((col) => (
+        <label
+          key={col.field as string}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 4
+          }}
+        >
+          <input
+            type="checkbox"
+            checked={visibilityModel[col.field as string] !== false}
+            onChange={(e) =>
+              setVisibilityModel((prev) => ({
+                ...prev,
+                [col.field as string]: e.target.checked
+              }))
+            }
+          />
+          {col.headerName}
+        </label>
+      ))}
+    </Stack>
+    <DataTable
+      rows={rows2}
+      columns={allColumns}
+      columnVisibilityModel={visibilityModel}
+      onColumnVisibilityModelChange={setVisibilityModel}
+      noWrap
+    />
+  </Stack>
 ```
 
 #### Controlled Mode
@@ -1055,7 +1426,7 @@ const [visibilityModel, setVisibilityModel] = useState({ fat: false });
   columns={columns}
   columnVisibilityModel={visibilityModel}
   onColumnVisibilityModelChange={setVisibilityModel}
-/>
+/>;
 ```
 
 #### Uncontrolled Mode (initialState)
@@ -1074,41 +1445,73 @@ const [visibilityModel, setVisibilityModel] = useState({ fat: false });
 
 ```tsx
 <Stack spacing={2}>
-  <Stack direction="row" spacing={1} sx={{
-    flexWrap: 'wrap'
-  }}>
-  {columns.map(col => <label key={col.field as string} style={{
-    display: 'flex',
-    alignItems: 'center',
-    gap: 4
-  }}>
-  <input type="checkbox" checked={visibilityModel[col.field as string] !== false} onChange={e => setVisibilityModel(prev => ({
-    ...prev,
-    [col.field as string]: e.target.checked
-  }))} />
-  {col.headerName}
-</label>)}
-</Stack>
-<DataTable rows={rows4} columns={columns} columnGroupingModel={[{
-  groupId: 'group1',
-  headerName: 'Group 1',
-  children: [{
-    field: 'id'
-  }, {
-    field: 'number'
-  }, {
-    field: 'string'
-  }]
-}, {
-  groupId: 'group2',
-  headerName: 'Group 2',
-  children: [{
-    field: 'date'
-  }, {
-    field: 'object'
-  }]
-}]} columnVisibilityModel={visibilityModel} onColumnVisibilityModelChange={setVisibilityModel} noWrap />
-</Stack>
+    <Stack
+      direction="row"
+      spacing={1}
+      sx={{
+        flexWrap: "wrap"
+      }}
+    >
+      {columns.map((col) => (
+        <label
+          key={col.field as string}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 4
+          }}
+        >
+          <input
+            type="checkbox"
+            checked={visibilityModel[col.field as string] !== false}
+            onChange={(e) =>
+              setVisibilityModel((prev) => ({
+                ...prev,
+                [col.field as string]: e.target.checked
+              }))
+            }
+          />
+          {col.headerName}
+        </label>
+      ))}
+    </Stack>
+    <DataTable
+      rows={rows4}
+      columns={columns}
+      columnGroupingModel={[
+        {
+          groupId: "group1",
+          headerName: "Group 1",
+          children: [
+            {
+              field: "id"
+            },
+            {
+              field: "number"
+            },
+            {
+              field: "string"
+            }
+          ]
+        },
+        {
+          groupId: "group2",
+          headerName: "Group 2",
+          children: [
+            {
+              field: "date"
+            },
+            {
+              field: "object"
+            }
+          ]
+        }
+      ]}
+      columnVisibilityModel={visibilityModel}
+      onColumnVisibilityModelChange={setVisibilityModel}
+      noWrap
+    />
+  </Stack>
 ```
 
 #### Notes
@@ -1124,11 +1527,11 @@ Setting `resizable: true` on a column allows you to adjust the column width by d
 
 ```tsx
 <Stack gap={1}>
-  <Typography level="body-sm" textColor="text.secondary">
-    Drag the column borders to resize columns
-  </Typography>
-  <DataTable rows={tableRows} columns={columns} noWrap />
-</Stack>
+    <Typography level="body-sm" textColor="text.secondary">
+      Drag the column borders to resize columns
+    </Typography>
+    <DataTable rows={tableRows} columns={columns} noWrap />
+  </Stack>
 ```
 
 ```tsx
@@ -1153,45 +1556,58 @@ const columns = [
 Setting `headerLineClamp: 2` on a column allows the header text to wrap up to 2 lines. Text exceeding 2 lines is truncated with an ellipsis, and a tooltip is displayed on hover when truncation occurs.
 
 ```tsx
-<Box sx={{
-  width: 500
-}}>
-<DataTable rows={manyRows} columns={[{
-  field: 'dessert',
-  headerName: 'Dessert Name (100g serving)',
-  headerLineClamp: 2,
-  width: '120px'
-}, {
-  field: 'calories',
-  headerName: 'Calories (kcal)',
-  headerLineClamp: 2,
-  type: 'number',
-  width: '80px'
-}, {
-  field: 'fat',
-  headerName: 'Fat Content (grams)',
-  headerLineClamp: 2,
-  type: 'number',
-  width: '80px'
-}, {
-  field: 'carbs',
-  headerName: 'Total Carbohydrates (g)',
-  headerLineClamp: 2,
-  type: 'number',
-  width: '90px'
-}, {
-  field: 'protein',
-  headerName: 'Protein Amount (g)',
-  type: 'number',
-  width: '120px'
-}]} stickyHeader slotProps={{
-  background: {
-    style: {
-      height: '400px'
-    }
-  }
-}} />
-</Box>
+<Box
+    sx={{
+      width: 500
+    }}
+  >
+    <DataTable
+      rows={manyRows}
+      columns={[
+        {
+          field: "dessert",
+          headerName: "Dessert Name (100g serving)",
+          headerLineClamp: 2,
+          width: "120px"
+        },
+        {
+          field: "calories",
+          headerName: "Calories (kcal)",
+          headerLineClamp: 2,
+          type: "number",
+          width: "80px"
+        },
+        {
+          field: "fat",
+          headerName: "Fat Content (grams)",
+          headerLineClamp: 2,
+          type: "number",
+          width: "80px"
+        },
+        {
+          field: "carbs",
+          headerName: "Total Carbohydrates (g)",
+          headerLineClamp: 2,
+          type: "number",
+          width: "90px"
+        },
+        {
+          field: "protein",
+          headerName: "Protein Amount (g)",
+          type: "number",
+          width: "120px"
+        }
+      ]}
+      stickyHeader
+      slotProps={{
+        background: {
+          style: {
+            height: "400px"
+          }
+        }
+      }}
+    />
+  </Box>
 ```
 
 ```tsx
@@ -1212,7 +1628,7 @@ const columns = [
   },
   {
     field: 'protein',
-    headerName: 'Protein (g)',  // no headerLineClamp — single line (default)
+    headerName: 'Protein (g)', // no headerLineClamp — single line (default)
     type: 'number',
   },
 ];
@@ -1230,14 +1646,16 @@ const columns = [
 
 ```tsx
 <div>
-  <DataTable rows={rows3} columns={columns} checkboxSelection={false} noWrap editMode />
-  <Button onClick={() => {
-    console.log(editedRows);
-    setIsCellEditable(true);
-  }}>
-  Submit
-</Button>
-</div>
+    <DataTable rows={rows3} columns={columns} checkboxSelection={false} noWrap editMode />
+    <Button
+      onClick={() => {
+        console.log(editedRows);
+        setIsCellEditable(true);
+      }}
+    >
+      Submit
+    </Button>
+  </div>
 ```
 
 #### Edit Types
@@ -1272,16 +1690,18 @@ const columns = [
 
 ```tsx
 <div>
-  <Typography level="title-lg" textColor="text.secondary">
-    expectedSales 100초과만 수정 가능
-  </Typography>
-  <DataTable rows={rows} columns={columns} checkboxSelection={false} noWrap editMode />
-  <Button onClick={() => {
-    console.log(rows);
-  }}>
-  Submit
-</Button>
-</div>
+    <Typography level="title-lg" textColor="text.secondary">
+      expectedSales 100초과만 수정 가능
+    </Typography>
+    <DataTable rows={rows} columns={columns} checkboxSelection={false} noWrap editMode />
+    <Button
+      onClick={() => {
+        console.log(rows);
+      }}
+    >
+      Submit
+    </Button>
+  </div>
 ```
 
 ### Real-time Data Updates
@@ -1296,11 +1716,11 @@ Setting `required: true` on a column displays a required indicator (\*) in the h
 
 ```tsx
 <Stack gap={1}>
-  <Typography level="body-sm" textColor="text.secondary">
-    Fields marked with * are required
-  </Typography>
-  <DataTable rows={tableRows} columns={columns} editMode noWrap />
-</Stack>
+    <Typography level="body-sm" textColor="text.secondary">
+      Fields marked with * are required
+    </Typography>
+    <DataTable rows={tableRows} columns={columns} editMode noWrap />
+  </Stack>
 ```
 
 ```tsx
@@ -1352,26 +1772,37 @@ You can use `onCellEditStart` and `onCellEditStop` to detect when editing starts
 
 ```tsx
 <Stack gap={2}>
-  <DataTable rows={tableRows} columns={columns} editMode noWrap />
-  <Box sx={{
-    p: 2,
-    bgcolor: 'neutral.100',
-    borderRadius: '8px',
-    fontFamily: 'monospace',
-    fontSize: '12px'
-  }}>
-  <Typography level="title-sm" sx={{
-    mb: 1
-  }}>
-  Edit Log:
-</Typography>
-{editLog.length === 0 ? <Typography level="body-xs" textColor="text.secondary">
-No edits yet. Click on a cell to edit.
-</Typography> : editLog.map(log => <Typography key={log} level="body-xs">
-{log}
-</Typography>)}
-</Box>
-</Stack>
+    <DataTable rows={tableRows} columns={columns} editMode noWrap />
+    <Box
+      sx={{
+        p: 2,
+        bgcolor: "neutral.100",
+        borderRadius: "8px",
+        fontFamily: "monospace",
+        fontSize: "12px"
+      }}
+    >
+      <Typography
+        level="title-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        Edit Log:
+      </Typography>
+      {editLog.length === 0 ? (
+        <Typography level="body-xs" textColor="text.secondary">
+          No edits yet. Click on a cell to edit.
+        </Typography>
+      ) : (
+        editLog.map((log) => (
+          <Typography key={log} level="body-xs">
+            {log}
+          </Typography>
+        ))
+      )}
+    </Box>
+  </Stack>
 ```
 
 ```tsx
@@ -1397,21 +1828,29 @@ Handles row click events. Useful for implementing Inspector patterns or detail v
 
 ```tsx
 <Stack gap={2}>
-  <DataTable rows={tableRows} columns={columns} hoverRow onRowClick={({
-    row
-  }) => setSelectedRow(row)} noWrap />
-  {selectedRow && <Box sx={{
-    p: 2,
-    border: '1px solid',
-    borderColor: 'neutral.300',
-    borderRadius: '8px'
-  }}>
-  <Typography level="title-md">Selected Employee Details</Typography>
-  <Typography level="body-sm">Name: {selectedRow.name}</Typography>
-  <Typography level="body-sm">Email: {selectedRow.email}</Typography>
-  <Typography level="body-sm">Department: {selectedRow.department}</Typography>
-</Box>}
-</Stack>
+    <DataTable
+      rows={tableRows}
+      columns={columns}
+      hoverRow
+      onRowClick={({ row }) => setSelectedRow(row)}
+      noWrap
+    />
+    {selectedRow && (
+      <Box
+        sx={{
+          p: 2,
+          border: "1px solid",
+          borderColor: "neutral.300",
+          borderRadius: "8px"
+        }}
+      >
+        <Typography level="title-md">Selected Employee Details</Typography>
+        <Typography level="body-sm">Name: {selectedRow.name}</Typography>
+        <Typography level="body-sm">Email: {selectedRow.email}</Typography>
+        <Typography level="body-sm">Department: {selectedRow.department}</Typography>
+      </Box>
+    )}
+  </Stack>
 ```
 
 ```tsx
@@ -1511,7 +1950,12 @@ const [selectedRow, setSelectedRow] = useState(null);
 #### Controlled Sort
 
 ```tsx
-<DataTable rows={rows4} columns={columns} sortModel={sortModel} onSortModelChange={handleSortModelChange} />
+<DataTable
+    rows={rows4}
+    columns={columns}
+    sortModel={sortModel}
+    onSortModelChange={handleSortModelChange}
+  />
 ```
 
 ```tsx
@@ -1610,19 +2054,34 @@ const [sortModel, setSortModel] = useState([{ field: 'calories', sort: 'asc' }])
 ### Sorting + Pagination
 
 ```tsx
-<DataTable rows={rows} columns={columns} pagination slotProps={{
-  background: {
-    style: {
-      height: '300px'
-    }
-  }
-}} getId={(row: RowForSort) => row.id} />
+<DataTable
+    rows={rows}
+    columns={columns}
+    pagination
+    slotProps={{
+      background: {
+        style: {
+          height: "300px"
+        }
+      }
+    }}
+    getId={(row: RowForSort) => row.id}
+  />
 ```
 
 ### Server Pagination
 
 ```tsx
-<DataTable rows={pagedRows} columns={columns as any} pagination paginationMode="server" rowCount={allRows.length} paginationModel={paginationModel} onPaginationModelChange={setPaginationModel} loading={loading} />
+<DataTable
+    rows={pagedRows}
+    columns={columns as any}
+    pagination
+    paginationMode="server"
+    rowCount={allRows.length}
+    paginationModel={paginationModel}
+    onPaginationModelChange={setPaginationModel}
+    loading={loading}
+  />
 ```
 
 You can specify the total row count using `paginationMode="server"` and `rowCount`.
@@ -1643,12 +2102,12 @@ You can specify the total row count using `paginationMode="server"` and `rowCoun
 
 ```tsx
 <Stack gap={4} height="500px">
-  <Stack direction="row" gap={2}>
-    <Button onClick={handleIncrease}>Increase</Button>
-    <Button onClick={handleDecrease}>Decrease</Button>
+    <Stack direction="row" gap={2}>
+      <Button onClick={handleIncrease}>Increase</Button>
+      <Button onClick={handleDecrease}>Decrease</Button>
+    </Stack>
+    <DataTable rows={rows} columns={columns} pagination getId={(row: RowForSort) => row.id} />
   </Stack>
-  <DataTable rows={rows} columns={columns} pagination getId={(row: RowForSort) => row.id} />
-</Stack>
 ```
 
 ## Advanced Layout
@@ -1656,7 +2115,17 @@ You can specify the total row count using `paginationMode="server"` and `rowCoun
 ### Pinned Columns
 
 ```tsx
-<DataTable rows={args.rows} columns={args.columns} pinnedColumns={args.pinnedColumns} stickyHeader={args.stickyHeader} stripe={args.stripe} noWrap={args.noWrap} hoverRow={args.hoverRow} selectionModel={selectionModel} onSelectionModelChange={setSelectionModel} />
+<DataTable
+    rows={args.rows}
+    columns={args.columns}
+    pinnedColumns={args.pinnedColumns}
+    stickyHeader={args.stickyHeader}
+    stripe={args.stripe}
+    noWrap={args.noWrap}
+    hoverRow={args.hoverRow}
+    selectionModel={selectionModel}
+    onSelectionModelChange={setSelectionModel}
+  />
 ```
 
 ```tsx
@@ -1679,51 +2148,87 @@ interface DataTableApi {
 ### Scrolling/Focusing to a Specific Row
 
 ```tsx
-<Box sx={{
-  height: '400px'
-}}>
-<DataTable ref={ref} rows={args.rows} columns={args.columns} checkboxSelection={args.checkboxSelection} disableSelectionOnClick={args.disableSelectionOnClick} selectionModel={args.selectionModel} isTotalSelected={args.isTotalSelected} pagination={args.pagination} paginationMode={args.paginationMode} paginationModel={args.paginationModel} noWrap={args.noWrap} hoverRow={args.hoverRow} stripe={args.stripe} stickyHeader={args.stickyHeader} initialState={args.initialState} />
-</Box>
+<Box
+    sx={{
+      height: "400px"
+    }}
+  >
+    <DataTable
+      ref={ref}
+      rows={args.rows}
+      columns={args.columns}
+      checkboxSelection={args.checkboxSelection}
+      disableSelectionOnClick={args.disableSelectionOnClick}
+      selectionModel={args.selectionModel}
+      isTotalSelected={args.isTotalSelected}
+      pagination={args.pagination}
+      paginationMode={args.paginationMode}
+      paginationModel={args.paginationModel}
+      noWrap={args.noWrap}
+      hoverRow={args.hoverRow}
+      stripe={args.stripe}
+      stickyHeader={args.stickyHeader}
+      initialState={args.initialState}
+    />
+  </Box>
 ```
 
 ### Inspector Pattern
 
 ```tsx
-<Stack sx={{
-  height: '100vh'
-}}>
-<Typography level="title-sm" textColor="text.secondary">
-  Virtualized & Inspector DataTable
-</Typography>
-<Button onClick={() => apiRef.current?.setCellFocus('0')}>Row ID 0 Focus</Button>
-<Button onClick={() => apiRef.current?.setCellFocus('100')}>Row ID 100 Focus</Button>
-<div style={{
-  flex: 1,
-  maxHeight: '100%',
-  overflow: 'auto'
-}}>
-<DataTable ref={apiRef} rows={args.rows} columns={args.columns} stripe={args.stripe} hoverRow={args.hoverRow} stickyHeader={args.stickyHeader} disableSelectionOnClick={args.disableSelectionOnClick} checkboxSelection={args.checkboxSelection} noWrap={args.noWrap} selectionModel={selectedRowId === -1 ? [] : [selectedRowId]} onRowClick={({
-  rowId
-}) => {
-  if (selectedRowId === rowId) {
-    setSelectedRowId(-1);
-  } else {
-    console.log(rowId);
-    setSelectedRowId(rowId);
-    setTimeout(() => {
-      apiRef.current?.setCellFocus(String(rowId));
-    }, 0);
-  }
-}} />
-</div>
-{selectedRowId !== -1 && <Box sx={{
-  backgroundColor: 'aqua',
-  border: 'black 1px solid',
-  height: '300px'
-}}>
-This is inspector: {selectedRowId}
-</Box>}
-</Stack>
+<Stack
+    sx={{
+      height: "100vh"
+    }}
+  >
+    <Typography level="title-sm" textColor="text.secondary">
+      Virtualized & Inspector DataTable
+    </Typography>
+    <Button onClick={() => apiRef.current?.setCellFocus("0")}>Row ID 0 Focus</Button>
+    <Button onClick={() => apiRef.current?.setCellFocus("100")}>Row ID 100 Focus</Button>
+    <div
+      style={{
+        flex: 1,
+        maxHeight: "100%",
+        overflow: "auto"
+      }}
+    >
+      <DataTable
+        ref={apiRef}
+        rows={args.rows}
+        columns={args.columns}
+        stripe={args.stripe}
+        hoverRow={args.hoverRow}
+        stickyHeader={args.stickyHeader}
+        disableSelectionOnClick={args.disableSelectionOnClick}
+        checkboxSelection={args.checkboxSelection}
+        noWrap={args.noWrap}
+        selectionModel={selectedRowId === -1 ? [] : [selectedRowId]}
+        onRowClick={({ rowId }) => {
+          if (selectedRowId === rowId) {
+            setSelectedRowId(-1);
+          } else {
+            console.log(rowId);
+            setSelectedRowId(rowId);
+            setTimeout(() => {
+              apiRef.current?.setCellFocus(String(rowId));
+            }, 0);
+          }
+        }}
+      />
+    </div>
+    {selectedRowId !== -1 && (
+      <Box
+        sx={{
+          backgroundColor: "aqua",
+          border: "black 1px solid",
+          height: "300px"
+        }}
+      >
+        This is inspector: {selectedRowId}
+      </Box>
+    )}
+  </Stack>
 ```
 
 ## Props and Customization