sui-react-table v0.3.13

Semantic Table

DataTable made with styled components from React Semantic UI.

Installation:

npm i sui-react-table

Dependencies: This component depends on the following packages

• React Semantic UI.
• Cleave JS.
• React CSV.
• Moment JS

Basic Example

const data = [
    {
        id: 9888,
        name: "Hartmann, Runolfsson and Stroman Inc",
        email: "Moshe67@gmail.com"
    },
    {
        id: 28451,
        name: "Jacobson Inc Inc",
        email: "Green19@hotmail.com"
    },
    {
        id: 72265,
        name: "Bahringer, Padberg and Upton Inc",
        email: "Casandra_Heaney97@gmail.com"
    },
]

<PaginatedTable
    title="Example"
    onCancel={true}
    rows={data}
    rowLimit={15}
    actionsActive={false}
    columns={[
        {
            width: 250,
            Header: 'Code',
            accessor: 'id',
        },
        {
            width: 225,
            Header: 'Name',
            accessor: 'name',
        },
        {
            width: 225,
            Header: 'Email',
            accessor: 'email',
        },
    ]}
/>

Props

Loading

const data = [
    {
        id: 9888,
        name: "Hartmann, Runolfsson and Stroman Inc",
        email: "Moshe67@gmail.com"
    },
    {
        id: 28451,
        name: "Jacobson Inc Inc",
        email: "Green19@hotmail.com"
    },
    {
        id: 72265,
        name: "Bahringer, Padberg and Upton Inc",
        email: "Casandra_Heaney97@gmail.com"
    },
]

const [isLoading, setIsLoading] = useState(false)

useEffect(() => {
    setIsLoading(true)
    setTimeout(() => {
        setIsLoading(false)
    }, 1500)
}, [])


<PaginatedTable
    loading={isLoading}
    title="Example"
    onCancel={true}
    rows={data}
    rowLimit={15}
    actionsActive={false}
    columns={[
        {
            width: 250,
            Header: 'Code',
            accessor: 'id',
        },
        {
            width: 225,
            Header: 'Name',
            accessor: 'name',
        },
        {
            width: 225,
            Header: 'Email',
            accessor: 'email',
        },
    ]}
/>

Header Actions

Example

const data = [
    {
        id: 9888,
        name: "Hartmann, Runolfsson and Stroman Inc",
        email: "Moshe67@gmail.com"
    },
    {
        id: 28451,
        name: "Jacobson Inc Inc",
        email: "Green19@hotmail.com"
    },
    {
        id: 72265,
        name: "Bahringer, Padberg and Upton Inc",
        email: "Casandra_Heaney97@gmail.com"
    },
]


<PaginatedTable
    title="Example"
    onCancel={true}
    rows={data}
    rowLimit={15}
    actionsActive={false}
    onSave={({ deleteItems, updateItems, createItems, rows }) => {
        console.log(deleteItems)
        console.log(updateItems)
        console.log(createItems)
        console.log(rows)
    }}
    onAdd={() => {
        console.log('This can be used to display an external form or modal form! Control the rendered rows externally')
    }}
    onAddRow={(id) => {
        return {
            id: id,
            name: "Daugherty Inc LLC"
            email: "Connor.Bergstrom56@yahoo.com"
        }
    }}
    onCancel={true}
    onEditCell={(editedRow) => {
        console.log('This is the new data: ')
        console.log(editedRow)
    }}
    enableExportToCSV={true}
    columns={[
        {
            width: 250,
            Header: 'Code',
            accessor: 'id',
        },
        {
            width: 225,
            Header: 'Name',
            accessor: 'name',
        },
        {
            width: 225,
            Header: 'Email',
            accessor: 'email',
        },
    ]}
/>

Row Actions

Example

const data = [
    {
        id: 9888,
        name: "Hartmann, Runolfsson and Stroman Inc",
        email: "Moshe67@gmail.com"
    },
    {
        id: 28451,
        name: "Jacobson Inc Inc",
        email: "Green19@hotmail.com"
    },
    {
        id: 72265,
        name: "Bahringer, Padberg and Upton Inc",
        email: "Casandra_Heaney97@gmail.com"
    },
]

const additionalActionButtons = [
    {
        name: 'View',
        icon: 'eye',
        action: (row) => {
            console.log(row)
        }
    },
     {
        name: 'Email',
        icon: 'mail',
        action: (row) => {
            console.log('Mail sent to ' + row.email)
        }
    }
]

<PaginatedTable
    title="Example"
    onCancel={true}
    rows={data}
    rowLimit={15}
    actionsActive={true}
    actionsWidth={125}
    onSelect={(selectedRow) => {
        console.log(selectedRow)
    }}
    onDelete={(remainingRows) => {
        console.log(remainingRows)
    }}
    additionalActionButtons={additionalActionButtons}
    columns={[
        {
            width: 250,
            Header: 'Code',
            accessor: 'id',
        },
        {
            width: 225,
            Header: 'Name',
            accessor: 'name',
        },
        {
            width: 225,
            Header: 'Email',
            accessor: 'email',
        },
    ]}
/>

Columns

Each column will have the following structure:

Column Options

Additional Header Actions

Each additional header button will have the following structure:

Example

const data = [
    {
        id: 9888,
        name: "Hartmann, Runolfsson and Stroman Inc",
        email: "Moshe67@gmail.com"
    },
    {
        id: 28451,
        name: "Jacobson Inc Inc",
        email: "Green19@hotmail.com"
    },
    {
        id: 72265,
        name: "Bahringer, Padberg and Upton Inc",
        email: "Casandra_Heaney97@gmail.com"
    },
]

<PaginatedTable
    title="Example"
    onCancel={true}
    rows={data}
    rowLimit={15}
    actionsActive={true}
    actionsWidth={125}
    onSelect={(selectedRow) => {
        console.log(selectedRow)
    }}
    onDelete={(remainingRows) => {
        console.log(remainingRows)
    }}
    additionalHeaderButtons={
            [
                {
                    label: 'Prueba',
                    icon: 'search',
                    action: (rows) => {
                        console.log(rows)
                    },
                },
            ]
        }
    columns={[
        {
            width: 250,
            Header: 'Code',
            accessor: 'id',
        },
        {
            width: 225,
            Header: 'Name',
            accessor: 'name',
        },
        {
            width: 225,
            Header: 'Email',
            accessor: 'email',
        },
    ]}
/>