Data table component

[ealmloff]

There isn't much interesting for accessibility in the default version, but it would be nice to have a data table component. This would be a style only component. A virtual table component could be added in the future

https://ui.shadcn.com/docs/components/radix/data-table

[Fakhir-Israr-200219]

Sir, did you require this table component only in Dioxus? If yes, it sounds easy. Can I try this?

[ealmloff]

Yes, I don't think there is anything special accessibility wise so it should just be that design in the preview crate

[Fakhir-Israr-200219]

Hi Sir 👋

I'm trying to add a table component to this project by following the existing component structure. I should be upfront . I'm new to Dioxus and this is my first time working with this codebase. I put together a basic table implementation with some AI assistance, so I'm making a beginner mistake somewhere. I'd really appreciate it if you could point out what I'm doing wrong.

The project compiles and runs fine, but none of the CSS styles are being applied — the table appears completely unstyled as shown in the screenshot below.

---

File Structure

variants/main/mod.rs

use dioxus::prelude::*;

#[derive(Clone, PartialEq)]
struct Payment {
    id: usize,
    status: &'static str,
    email: &'static str,
    amount: &'static str,
}

static DATA: &[Payment] = &[
    Payment { id: 1, status: "Success",    email: "ken99@example.com",       amount: "$316.00" },
    Payment { id: 2, status: "Success",    email: "abe45@example.com",       amount: "$242.00" },
    Payment { id: 3, status: "Processing", email: "monserrat44@example.com", amount: "$837.00" },
    Payment { id: 4, status: "Success",    email: "silas22@example.com",     amount: "$874.00" },
    Payment { id: 5, status: "Failed",     email: "carmella@example.com",    amount: "$721.00" },
];

#[component]
pub fn Demo() -> Element {
    let mut filter = use_signal(|| String::new());
    let mut selected = use_signal(|| vec![false; DATA.len()]);
    let mut email_asc = use_signal(|| true);

    let filtered: Vec<(usize, &Payment)> = DATA
        .iter()
        .enumerate()
        .filter(|(_, p)| {
            let f = filter.read();
            f.is_empty() || p.email.to_lowercase().contains(f.to_lowercase().as_str())
        })
        .collect();

    let selected_count = selected.read().iter().filter(|&&v| v).count();

    rsx! {
        div { class: "dx-table-wrapper",
            div { class: "dx-table-toolbar",
                input {
                    class: "dx-table-filter",
                    r#type: "text",
                    placeholder: "Filter emails...",
                    value: "{filter}",
                    oninput: move |e| filter.set(e.value()),
                }
                button { class: "dx-columns-btn",
                    "Columns "
                    span { class: "dx-chevron", "⌄" }
                }
            }
            div { class: "dx-table-container",
                table { class: "dx-table",
                    thead {
                        tr {
                            th {
                                input {
                                    r#type: "checkbox",
                                    class: "dx-checkbox",
                                    onchange: move |e| {
                                        let checked = e.checked();
                                        selected.write().iter_mut().for_each(|v| *v = checked);
                                    }
                                }
                            }
                            th { "Status" }
                            th {
                                button {
                                    class: "dx-sort-btn",
                                    onclick: move |_| {
                                        let current = *email_asc.read();
                                        email_asc.set(!current);
                                    },
                                    "Email "
                                    span { if *email_asc.read() { "↑↓" } else { "↓↑" } }
                                }
                            }
                            th { class: "dx-col-amount", "Amount" }
                            th {}
                        }
                    }
                    tbody {
                        {filtered.iter().map(|(i, p)| {
                            let i = *i;
                            let is_selected = selected.read()[i];
                            let status_class = match p.status {
                                "Success"    => "dx-badge dx-badge-success",
                                "Processing" => "dx-badge dx-badge-processing",
                                _            => "dx-badge dx-badge-failed",
                            };
                            rsx! {
                                tr {
                                    key: "{p.id}",
                                    class: if is_selected { "dx-row dx-row-selected" } else { "dx-row" },
                                    td {
                                        input {
                                            r#type: "checkbox",
                                            class: "dx-checkbox",
                                            checked: is_selected,
                                            onchange: move |e| { selected.write()[i] = e.checked(); }
                                        }
                                    }
                                    td { span { class: "{status_class}", "{p.status}" } }
                                    td { "{p.email}" }
                                    td { class: "dx-col-amount", "{p.amount}" }
                                    td { button { class: "dx-action-btn", "···" } }
                                }
                            }
                        })}
                    }
                }
            }
            div { class: "dx-table-footer",
                span { class: "dx-footer-info",
                    "{selected_count} of {DATA.len()} row(s) selected."
                }
                div { class: "dx-pagination-buttons",
                    button { class: "dx-pagination-button", "Previous" }
                    button { class: "dx-pagination-button", "Next" }
                }
            }
        }
    }
}

component.rs

use dioxus::prelude::*;
use super::variants::main::Demo as TableDemo;

#[component]
pub fn Demo() -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("./style.css") }
        TableDemo {}
    }
}

mod.rs

mod variants;
mod component;
pub use component::Demo;

style.css

.dx-table-wrapper {
  background-color: var(--background, #1a1a1a);
  border: 1px solid var(--border-color, #2e2e2e);
  border-radius: 0.75rem;
  overflow: hidden;
  font-family: inherit;
  color: var(--foreground, #e5e5e5);
}

.dx-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  gap: 0.75rem;
}

.dx-table-filter {
  flex: 1;
  max-width: 20rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border-color, #3a3a3a);
  border-radius: 0.375rem;
  background-color: transparent;
  color: var(--foreground, #e5e5e5);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 150ms;
}

.dx-table-filter::placeholder {
  color: var(--foreground-muted, #6b7280);
}

.dx-table-filter:focus {
  border-color: var(--border-focus, #6b7280);
}

.dx-columns-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.875rem;
  border: 1px solid var(--border-color, #3a3a3a);
  border-radius: 0.375rem;
  background-color: transparent;
  color: var(--foreground, #e5e5e5);
  font-size: 0.875rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms;
}

.dx-columns-btn:hover {
  background-color: var(--background-hover, #2a2a2a);
}

.dx-chevron {
  font-size: 0.75rem;
  opacity: 0.7;
}

.dx-table-container {
  overflow-x: auto;
  border-top: 1px solid var(--border-color, #2e2e2e);
}

.dx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.dx-table thead tr {
  border-bottom: 1px solid var(--border-color, #2e2e2e);
}

.dx-table th {
  padding: 0.6rem 0.75rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--foreground, #e5e5e5);
  white-space: nowrap;
}

.dx-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border-color, #222222);
  color: var(--foreground-muted, #a1a1aa);
}

.dx-table tbody tr:last-child td {
  border-bottom: none;
}

.dx-row:hover td {
  background-color: var(--background-hover, #222222);
}

.dx-row-selected td {
  background-color: var(--background-selected, #1e2a1e);
}

.dx-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: var(--foreground, #e5e5e5);
  cursor: pointer;
}

.dx-sort-btn {
  background: none;
  border: none;
  color: var(--foreground, #e5e5e5);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.dx-col-amount {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  color: var(--foreground, #e5e5e5) !important;
}

.dx-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.dx-badge-success {
  background-color: transparent;
  color: var(--foreground-muted, #a1a1aa);
}

.dx-badge-processing {
  background-color: transparent;
  color: var(--foreground-muted, #a1a1aa);
}

.dx-badge-failed {
  background-color: transparent;
  color: var(--foreground-muted, #a1a1aa);
}

.dx-action-btn {
  background: none;
  border: none;
  color: var(--foreground-muted, #6b7280);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 0.25rem;
  letter-spacing: 0.05em;
  transition: color 150ms;
}

.dx-action-btn:hover {
  color: var(--foreground, #e5e5e5);
}

.dx-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-color, #2e2e2e);
}

.dx-footer-info {
  font-size: 0.8rem;
  color: var(--foreground-muted, #6b7280);
}

.dx-pagination-buttons {
  display: flex;
  gap: 0.5rem;
}

.dx-pagination-button {
  padding: 0.3rem 0.875rem;
  border: 1px solid var(--border-color, #3a3a3a);
  border-radius: 0.375rem;
  font-size: 0.8rem;
  background-color: transparent;
  color: var(--foreground, #e5e5e5);
  cursor: pointer;
  transition: background-color 150ms;
}

.dx-pagination-button:hover {
  background-color: var(--background-hover, #2a2a2a);
}

---

Any help identifying what I'm doing wrong would be greatly appreciated. Thank you! 🙏

[ealmloff]

variants/main/mod.rs usually imports from component.rs, not the other way around. Demo in the variants is the function the homepage will render, not the component.rs version which has the styles. Feel free to put up a draft pr

[sarendipitee]

I already built a full featured DataTable months ago...

https://sarendipitee.github.io/dioxus-components/components/data_table