ts-react-listview

• ListView component for react.
• Supports fixed row headers, column headers, and changing column widths.

Installation

yarn add ts-react-listview

release

• [2024/3/23] v1.0.2 released

1. Revised the design.
2. Scroll bars now display properly on smartphones.

• [2024/3/18] v1.0.1 released

simple example

demo

import React from 'react';
import { PageLayout } from '../layout/pageLayout';
import styles from "./example1Page.module.scss";
import { ListView, ListViewItem, ListViewRow } from 'ts-react-listview';
export function Example1Page(
  props: {
  }
) 
{
  const data : {a: string, b: string, c: string}[] = new Array(100).fill(1).map((item, index) => {
    return {
      a: `A${index}`,
      b: `B${index}`,
      c: `C${index}`,
    };
  });
  return (
    <PageLayout title="Example1">
      <div>
        <ListView headers={[
          {
            name: "a",
            label: <div className={styles.listViewCloumn}>A</div>,
            defaultWidth: 70,
          },
          {
            name: "b",
            label: <div className={styles.listViewCloumn}>B</div>,
            defaultWidth: 100,
          },
          {
            name: "c",
            label: <div className={styles.listViewCloumn}>C</div>,
            defaultWidth: 120,
          },
        ]}>
          {(data ?? []).map((item, index) => (
            <ListViewRow key={index} >
              <ListViewItem name="a">
                <div className={styles.listViewCell}>{item.a}</div>
              </ListViewItem>
              <ListViewItem name="b">
                <div className={styles.listViewCell}>{item.b}</div>
              </ListViewItem>
              <ListViewItem name="c">
                <div className={styles.listViewCell}>{item.c}</div>
              </ListViewItem>
            </ListViewRow>
          ))}
        </ListView>
      </div>
    </PageLayout>
  );
}

Show row headers

demo

• Set hasRowHeader={true} to display row headers.
• If you display row headers, you need to specify the row width and height. rowHeaderWidth={100} rowHeight={50}

import React from 'react';
import { PageLayout } from '../layout/pageLayout';
import styles from "./example2Page.module.scss";
import { ListView, ListViewItem, ListViewRow } from 'ts-react-listview';
export function Example2Page(
  props: {
  }
) 
{
  const data : {a: string, b: string, c: string}[] = new Array(100).fill(1).map((item, index) => {
    return {
      a: `A${index}`,
      b: `B${index}`,
      c: `C${index}`,
    };
  });
  return (
    <PageLayout title="Example1">
      <div>
        <ListView hasRowHeader={true} rowHeaderWidth={100} rowHeight={50} headers={[
          {
            name: "a",
            label: <div className={styles.listViewCloumn}>A</div>,
            defaultWidth: 70,
          },
          {
            name: "b",
            label: <div className={styles.listViewCloumn}>B</div>,
            defaultWidth: 100,
          },
          {
            name: "c",
            label: <div className={styles.listViewCloumn}>C</div>,
            defaultWidth: 120,
          },
        ]}>
          {(data ?? []).map((item, index) => (
            <ListViewRow key={index}  header={<div style={{height: "100%", display: "flex", justifyContent: "center", alignItems: "center"}}>{index}</div>} >
              <ListViewItem name="a">
                <div className={styles.listViewCell}>{item.a}</div>
              </ListViewItem>
              <ListViewItem name="b">
                <div className={styles.listViewCell}>{item.b}</div>
              </ListViewItem>
              <ListViewItem name="c">
                <div className={styles.listViewCell}>{item.c}</div>
              </ListViewItem>
            </ListViewRow>
          ))}
        </ListView>
      </div>
    </PageLayout>
  );
}

Change borders

demo

• You can specify the border style, such as horizontalLineStyle="1px solid black" verticvalLineStyle="1px solid black".

What happens when column width changes

demo

• Use the onResizeColumn property.
• Below is an example of retaining the changed column width in local storage and applying it on reload.

 <ListView horizontalLineStyle="1px solid black" verticvalLineStyle="1px solid black" onResizeColumn={(name, width) => {
          localStorage.setItem(`Example3Page_${name}`, String(width));
        }} headers={[
          {
            name: "a",
            label: <div className={styles.listViewCloumn}>A</div>,
            defaultWidth: Number(localStorage.getItem(`Example3Page_a`) ?? 100),
          },
          {
            name: "b",
            label: <div className={styles.listViewCloumn}>B</div>,
            defaultWidth: Number(localStorage.getItem(`Example3Page_b`) ?? 100),
          },
          {
            name: "c",
            label: <div className={styles.listViewCloumn}>C</div>,
            defaultWidth: Number(localStorage.getItem(`Example3Page_c`) ?? 100),
          },
        ]}>

Prohibit changing column size

demo

• By setting resizeColumnEnabled={false}, you will not be able to change the column width.

Size

<a href="https://app.archive-gp.com/ts-react-listview/example5" target=">demo

• The ListView will be the size of the element you place it on.