Tables are designed to show data in a tabular layout making it easy to see large amounts of data at once and compare rows with each other.
Here is a super-basic table.
| Column 1 | Column 2 | 
|---|---|
| foo | bar | 
| fizz | buzz | 
| Column 1 | Column 2 | 
|---|---|
| foo | bar | 
| fizz | buzz | 
- data = [{col1: "foo", col2: "bar"}, {col1: "fizz", col2: "buzz"}]
= daisy_table do |table|
  - table.with_head do |head|
    - head.with_column do
      Column 1
    - head.with_column do
      Column 2
  - data.each do |d|
    - table.with_row do |row|
      - row.with_column do
        = d[:col1]
      - row.with_column do
        = d[:col2]
The following example shows how to have a table with multiple headers pinned as you scroll.
| 1900s | 
|---|
| 1900 | 
| 1901 | 
| 1902 | 
| 1903 | 
| 1904 | 
| 1905 | 
| 1906 | 
| 1907 | 
| 1908 | 
| 1909 | 
| 1910s | 
| 1910 | 
| 1911 | 
| 1912 | 
| 1913 | 
| 1914 | 
| 1915 | 
| 1916 | 
| 1917 | 
| 1918 | 
| 1919 | 
| 1920s | 
| 1920 | 
| 1921 | 
| 1922 | 
| 1923 | 
| 1924 | 
| 1925 | 
| 1926 | 
| 1927 | 
| 1928 | 
| 1929 | 
| 1930s | 
| 1930 | 
| 1931 | 
| 1932 | 
| 1933 | 
| 1934 | 
| 1935 | 
| 1936 | 
| 1937 | 
| 1938 | 
| 1939 | 
| 1940s | 
| 1940 | 
| 1941 | 
| 1942 | 
| 1943 | 
| 1944 | 
| 1945 | 
| 1946 | 
| 1947 | 
| 1948 | 
| 1949 | 
| 1950s | 
| 1950 | 
| 1951 | 
| 1952 | 
| 1953 | 
| 1954 | 
| 1955 | 
| 1956 | 
| 1957 | 
| 1958 | 
| 1959 | 
| 1960s | 
| 1960 | 
| 1961 | 
| 1962 | 
| 1963 | 
| 1964 | 
| 1965 | 
| 1966 | 
| 1967 | 
| 1968 | 
| 1969 | 
| 1970s | 
| 1970 | 
| 1971 | 
| 1972 | 
| 1973 | 
| 1974 | 
| 1975 | 
| 1976 | 
| 1977 | 
| 1978 | 
| 1979 | 
| 1980s | 
| 1980 | 
| 1981 | 
| 1982 | 
| 1983 | 
| 1984 | 
| 1985 | 
| 1986 | 
| 1987 | 
| 1988 | 
| 1989 | 
| 1990s | 
| 1990 | 
| 1991 | 
| 1992 | 
| 1993 | 
| 1994 | 
| 1995 | 
| 1996 | 
| 1997 | 
| 1998 | 
| 1999 | 
| 1900s | 
|---|
| 1900 | 
| 1901 | 
| 1902 | 
| 1903 | 
| 1904 | 
| 1905 | 
| 1906 | 
| 1907 | 
| 1908 | 
| 1909 | 
| 1910s | 
| 1910 | 
| 1911 | 
| 1912 | 
| 1913 | 
| 1914 | 
| 1915 | 
| 1916 | 
| 1917 | 
| 1918 | 
| 1919 | 
| 1920s | 
| 1920 | 
| 1921 | 
| 1922 | 
| 1923 | 
| 1924 | 
| 1925 | 
| 1926 | 
| 1927 | 
| 1928 | 
| 1929 | 
| 1930s | 
| 1930 | 
| 1931 | 
| 1932 | 
| 1933 | 
| 1934 | 
| 1935 | 
| 1936 | 
| 1937 | 
| 1938 | 
| 1939 | 
| 1940s | 
| 1940 | 
| 1941 | 
| 1942 | 
| 1943 | 
| 1944 | 
| 1945 | 
| 1946 | 
| 1947 | 
| 1948 | 
| 1949 | 
| 1950s | 
| 1950 | 
| 1951 | 
| 1952 | 
| 1953 | 
| 1954 | 
| 1955 | 
| 1956 | 
| 1957 | 
| 1958 | 
| 1959 | 
| 1960s | 
| 1960 | 
| 1961 | 
| 1962 | 
| 1963 | 
| 1964 | 
| 1965 | 
| 1966 | 
| 1967 | 
| 1968 | 
| 1969 | 
| 1970s | 
| 1970 | 
| 1971 | 
| 1972 | 
| 1973 | 
| 1974 | 
| 1975 | 
| 1976 | 
| 1977 | 
| 1978 | 
| 1979 | 
| 1980s | 
| 1980 | 
| 1981 | 
| 1982 | 
| 1983 | 
| 1984 | 
| 1985 | 
| 1986 | 
| 1987 | 
| 1988 | 
| 1989 | 
| 1990s | 
| 1990 | 
| 1991 | 
| 1992 | 
| 1993 | 
| 1994 | 
| 1995 | 
| 1996 | 
| 1997 | 
| 1998 | 
| 1999 | 
.size-96.border.border-base-300.rounded.overflow-y-auto
  = daisy_table(css: "bg-base-100 table-pin-rows") do |table|
    - (0..90).step(10).with_index do |step, index|
      - table.with_section do |section|
        - section.with_head do |head|
          - head.with_column(css: 'bg-secondary text-secondary-content') do
            - if step == 0
              1900s
            - else
              = "19#{index * 10}s"
        - section.with_body do |body|
          - (0..9).each do |i|
            - body.with_row do |row|
              - row.with_column do
                - if step == 0
                  = "190#{step + i}"
                - else
                  = "19#{step + i}"
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.