Skip to content

feat(Table): add disableMobileListView prop to prevent mobile list conversion #877

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
maxknv wants to merge 4 commits into from
Closed

feat(Table): add disableMobileListView prop to prevent mobile list conversion #877

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7eb9d13
feat(Table): add disableMobileListView prop to prevent mobile list co…
maxknv Mar 5, 2026
d09f922
Merge branch 'main' into feat/table-disable-mobile-list-view
punkbit Mar 6, 2026
7088b26
Merge branch 'main' into feat/table-disable-mobile-list-view
punkbit Mar 6, 2026
8a93b54
Use theme breakpoint instead of hardcoded 768px
maxknv Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 98 additions & 71 deletions src/components/Table/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -351,26 +351,28 @@ const TableRow = styled.tr<TableRowProps>`
border-bottom: none;
}

@media (max-width: 768px) {
position: relative;
display: flex;
flex-wrap: wrap;
${({ theme, $isSelectable = false, $showActions = false }) => `
border: ${theme.click.table.cell.stroke} solid ${
theme.click.table.row.color.stroke.default
};
border-radius: ${theme.click.table.radii.all};
${
$isSelectable
? `padding-left: calc(${theme.click.table.body.cell.space.sm.x} + ${theme.click.table.body.cell.space.sm.x} + ${theme.click.checkbox.size.all});`
: ''
}
${
$showActions
? `padding-right: calc(${theme.click.table.body.cell.space.sm.x} + ${theme.click.table.body.cell.space.sm.x} + ${theme.click.image.sm.size.width} + ${theme.click.button.iconButton.default.space.x} + ${theme.click.button.iconButton.default.space.x});`
: ''
}
`}
[data-responsive-mode='list'] & {
@media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
position: relative;
display: flex;
flex-wrap: wrap;
${({ theme, $isSelectable = false, $showActions = false }) => `
border: ${theme.click.table.cell.stroke} solid ${
theme.click.table.row.color.stroke.default
};
border-radius: ${theme.click.table.radii.all};
${
$isSelectable
? `padding-left: calc(${theme.click.table.body.cell.space.sm.x} + ${theme.click.table.body.cell.space.sm.x} + ${theme.click.checkbox.size.all});`
: ''
}
${
$showActions
? `padding-right: calc(${theme.click.table.body.cell.space.sm.x} + ${theme.click.table.body.cell.space.sm.x} + ${theme.click.image.sm.size.width} + ${theme.click.button.iconButton.default.space.x} + ${theme.click.button.iconButton.default.space.x});`
: ''
}
`}
}
}
`;

Expand All @@ -381,18 +383,22 @@ const TableData = styled.td<{ $size: TableSize }>`
font: ${theme.click.table.cell.text.default};
padding: ${theme.click.table.body.cell.space[$size].y} ${theme.click.table.body.cell.space[$size].x};
`}
@media (max-width: 768px) {
width: auto;
min-width: 40%;
${({ theme }) => `
padding: ${theme.click.table.body.cell.space.sm.y} ${theme.click.table.body.cell.space.sm.x};
`}
[data-responsive-mode="list"] & {
@media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
width: auto;
min-width: 40%;
${({ theme }) => `
padding: ${theme.click.table.body.cell.space.sm.y} ${theme.click.table.body.cell.space.sm.x};
`}
}
}
`;

const StyledColGroup = styled.colgroup`
@media (max-width: 768px) {
display: none;
[data-responsive-mode='list'] & {
@media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
display: none;
}
}
`;
const StyledThead = styled.thead`
Expand All @@ -404,8 +410,10 @@ const StyledThead = styled.thead`
}) => ` border-bottom: ${theme.click.table.cell.stroke} solid ${theme.click.table.row.color.stroke.default};
`}
}
@media (max-width: 768px) {
display: none;
[data-responsive-mode='list'] & {
@media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
display: none;
}
}
`;

Expand All @@ -415,15 +423,19 @@ const MobileHeader = styled.div`
color: ${theme.click.table.row.color.label.default};
font: ${theme.click.table.cell.label.default};
`}
@media (max-width: 768px) {
display: block;
[data-responsive-mode="list"] & {
@media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
display: block;
}
}
`;
const Tbody = styled.tbody`
@media (max-width: 768px) {
display: flex;
flex-direction: column;
gap: 0.25rem;
[data-responsive-mode='list'] & {
@media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
}
`;

Expand All @@ -434,17 +446,19 @@ const SelectData = styled.td<{ $size: TableSize }>`
font: ${theme.click.table.cell.text.default};
padding: ${theme.click.table.body.cell.space[$size].y} ${theme.click.table.body.cell.space[$size].x};
`}
@media (max-width: 768px) {
width: auto;
align-self: stretch;
position: absolute;
left: 0;
top: 0;
bottom: 0;
${({ theme }) => `
padding: ${theme.click.table.body.cell.space.sm.y} ${theme.click.table.body.cell.space.sm.x};
border-right: ${theme.click.table.cell.stroke} solid ${theme.click.table.row.color.stroke.default};
`}
[data-responsive-mode="list"] & {
@media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
width: auto;
align-self: stretch;
position: absolute;
left: 0;
top: 0;
bottom: 0;
${({ theme }) => `
padding: ${theme.click.table.body.cell.space.sm.y} ${theme.click.table.body.cell.space.sm.x};
border-right: ${theme.click.table.cell.stroke} solid ${theme.click.table.row.color.stroke.default};
`}
}
}
`;
const ActionsList = styled.td<{ $size: TableSize }>`
Expand All @@ -454,17 +468,19 @@ const ActionsList = styled.td<{ $size: TableSize }>`
font: ${theme.click.table.cell.text.default};
padding: ${theme.click.table.body.cell.space[$size].y} ${theme.click.table.body.cell.space[$size].x};
`}
@media (max-width: 768px) {
width: auto;
align-self: stretch;
position: absolute;
right: 0;
top: 0;
bottom: 0;
${({ theme }) => `
padding: ${theme.click.table.body.cell.space.sm.y} ${theme.click.table.body.cell.space.sm.x};
border-left: 1px solid ${theme.click.table.row.color.stroke.default};
`}
[data-responsive-mode="list"] & {
@media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
width: auto;
align-self: stretch;
position: absolute;
right: 0;
top: 0;
bottom: 0;
${({ theme }) => `
padding: ${theme.click.table.body.cell.space.sm.y} ${theme.click.table.body.cell.space.sm.x};
border-left: 1px solid ${theme.click.table.row.color.stroke.default};
`}
}
}
`;

Expand All @@ -473,10 +489,12 @@ const ActionsContainer = styled.div`
flex-wrap: wrap;
gap: 0.5rem;
overflow: hidden;
@media (max-width: 768px) {
flex-direction: column;
overflow: auto;
flex-wrap: nowrap;
[data-responsive-mode='list'] & {
@media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
flex-direction: column;
overflow: auto;
flex-wrap: nowrap;
}
}
`;

Expand All @@ -499,11 +517,13 @@ const TableOuterContainer = styled.div`

const MobileActions = styled.div`
display: none;
@media (max-width: 768px) {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 ${({ theme }) => theme.click.table.body.cell.space.sm.x};
[data-responsive-mode='list'] & {
@media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 ${({ theme }) => theme.click.table.body.cell.space.sm.x};
}
}
`;
const EditButton = styled.button`
Expand Down Expand Up @@ -559,6 +579,8 @@ interface CommonTableProps extends Omit<
showHeader?: boolean;
rowHeight?: string;
resizableColumns?: boolean;
/** Disables mobile list view on narrow screens. When true, table uses horizontal scroll instead. Default: false */
disableMobileListView?: boolean;
}

type SelectReturnValue = {
Expand Down Expand Up @@ -747,6 +769,7 @@ const Table = forwardRef<HTMLTableElement, TableProps>(
showHeader = true,
rowHeight,
resizableColumns,
disableMobileListView = false,
...props
},
ref
Expand Down Expand Up @@ -943,7 +966,9 @@ const Table = forwardRef<HTMLTableElement, TableProps>(
);

return (
<TableOuterContainer>
<TableOuterContainer
data-responsive-mode={disableMobileListView ? 'scroll' : 'list'}
>
{hasRows && showHeader && (
<MobileActions>
{isSelectable && (
Expand Down Expand Up @@ -1137,9 +1162,11 @@ const StyledTable = styled.table`
overflow: visible;
table-layout: fixed;

@media (max-width: 768px) {
border: none;
table-layout: auto;
[data-responsive-mode='list'] & {
@media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {
border: none;
table-layout: auto;
}
}
`;

Expand Down
Loading