How to make the datagrid columns responsive #3247

satyajit-behera · 2025-01-25T12:09:36Z

satyajit-behera
Jan 25, 2025

Hi,

Need help in making DataGrid columns responsive. Can anyone help me. Is it possible to align the column one below other in a small screen.

Thanks in advance.

rpodevns · 2025-01-28T00:43:33Z

rpodevns
Jan 28, 2025

A responsive FluentDataGrid where the columns wrap is unlikely to be feasible because the DataGrid uses the HTML <table> element, which is inherently designed for horizontal columns. In the plain HTML example below, achieving consistent alignment between <th> and <td> requires hard-coding their widths to match, which conflicts with the dynamic resizing capabilities of the DataGrid. Given the DataGrid's support for resizable columns, maintaining alignment in such a scenario would likely be unworkable.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Wrapping Table</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto; 
        }

        thead, tbody {
            display: block;
        }

        tr {
            display: flex;
            flex-wrap: wrap;
        }

        th, td {
            flex: 1 1 200px; 
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
            word-wrap: break-word;
            box-sizing: border-box;
        }

        thead th {
            background-color: #f4f4f4;
        }

        @media screen and (max-width: 768px) {
            th, td {
                flex: 1 1 100%; 
            }
        }
    </style>
</head>
<body>
    <h1>Responsive Wrapping Table</h1>
    <table>
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
                <th>Header 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data for column 1</td>
                <td>Data for column 2</td>
                <td>Data for column 3</td>
                <td>Data for column 4</td>
            </tr>
            <tr>
                <td>Data for column 1 (longer text)</td>
                <td>Data for column 2 (longer text)</td>
                <td>Data for column 3 (longer text)</td>
                <td>Data for column 4 (longer text)</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How to make the datagrid columns responsive #3247

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

How to make the datagrid columns responsive #3247

Uh oh!

satyajit-behera Jan 25, 2025

Replies: 1 comment

Uh oh!

rpodevns Jan 28, 2025

satyajit-behera
Jan 25, 2025

rpodevns
Jan 28, 2025