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.